В произвольный момент cбрасывается style...
Товарищи на основе задачи из местного учебника, решил дополнительно покатать мяч по полю, вот собственно код:
<!DOCTYPE HTML>
<html>
<head>
<style>
#field {
width: 200px;
border: 10px groove black;
background-color: #00FF00;
position: relative;
}
#ball {
position: absolute;
}
</style>
</head>
<body>
<div id="field">
<img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
<script>
'use strict';
let field = document.getElementById('field');
let ball = document.querySelector('img');
let medX = field.clientWidth / 2;
let medY = field.clientHeight / 2;
let xStart = medX - ball.offsetWidth / 2;
let yStart = medY - ball.offsetHeight / 2;
ball.style.Left = '0px';
ball.style.Top = '0px';
let timerId = setTimeout(function doGoal() {
if (parseInt(ball.style.Left) < xStart) {
ball.style.Left = (parseInt(ball.style.Left) + 1) + 'px';
} else {
clearTimeout(timerId);
return;
}
if (parseInt(ball.style.Top) < yStart) {
ball.style.Top = (parseInt(ball.style.Top) + 1) + 'px';
} else {
clearTimeout(timerId);
return;
}
timerId = setTimeout(doGoal, 100);
}, 100);
</script>
</body>
</html>
Предполагал, что мяч будет смещаться по X,Y пока по одной из координат не достигнет середины поля. В реальности в какой-то момент ball.style.Left становится undefined, и соответственно все рушится. Прошу совета, понимаю что ошибка должна быть элементарная, но уже сломал всю голову... |
Maklay,
Цитата:
Цитата:
|
2 рони:
*исправлено со временем* Премного благодарен(хотя с первого раза не дошло). Но тем не менее, при изначальной кривой реализации, когда вместо изменения стиля элемента, я просто менял по ошибке созданную характеристику объекта style (Left, Top) результат на выходе выглядит все равно странным: При запуске по шагам с брейкпоинтом в строке 34, ball.style.Left какое-то количество шагов увеличивается на 1px как и задумано (ну с учетом изначальной ошибки), но затем, в произвольный момент(иногда даже без смены шага), становится undefinite, что соответственно завершает исполнение. |
Maklay,
добавил вывод в консоль, где undefinite ?
<!DOCTYPE HTML>
<html>
<head>
<style>
#field {
width: 200px;
border: 10px groove black;
background-color: #00FF00;
position: relative;
}
#ball {
position: absolute;
}
</style>
</head>
<body>
<div id="field">
<img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
<script>
'use strict';
let field = document.getElementById('field');
let ball = document.querySelector('img');
let medX = field.clientWidth / 2;
let medY = field.clientHeight / 2;
let xStart = medX - ball.offsetWidth / 2;
let yStart = medY - ball.offsetHeight / 2;
ball.style.left = '0px';
ball.style.top = '0px';
let timerId = setTimeout(function doGoal() { console.log(ball.style.left)
if (parseInt(ball.style.left) < xStart) {
ball.style.left = (parseInt(ball.style.left) + 1) + 'px';
} else {
clearTimeout(timerId);
return;
}
if (parseInt(ball.style.top) < yStart) {
ball.style.top = (parseInt(ball.style.top) + 1) + 'px';
} else {
clearTimeout(timerId);
return;
}
timerId = setTimeout(doGoal, 100);
}, 100);
</script>
</body>
</html>
|
Рони,
Основная проблема решена, мяч с учетом исправлений движется как задумано(за что еще раз выражаю благодарность). Вопрос остался, лишь при попытке произвести разбор своей ошибки. Как работает код с неверным обращением (Left): 1)из за обращения к ball.style.Left вместо ball.style.left, вместо изменения стиля ball, в объект ball.style была дописана новая характеристика Left, просто как доп свойство. 2)При прогоне по шагам с брейкпоинтом в 34 строке, данная характеристика меняется какое-то время, но потом просто исчезает из данного объекта, и как следствие ball.style.Left=undefinite. Непонятно почему код не работает так: 1)из за обращения к ball.style.Left вместо ball.style.left, вместо изменения стиля ball, в объект ball.style была дописана новая характеристика Left, просто как доп свойство. 2)При завершении таймера мяч на месте но в ball.style остаются два добавленных свойства Left и Top со значениями которые они приобрели. |
Maklay,
может кто-то другой прокомментирует ... |
| Часовой пояс GMT +3, время: 14:32. |