В произвольный момент 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, время: 13:22. |