Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.11.2017, 17:35
Интересующийся
Отправить личное сообщение для Maklay Посмотреть профиль Найти все сообщения от Maklay
 
Регистрация: 01.10.2017
Сообщений: 19

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

Прошу совета, понимаю что ошибка должна быть элементарная, но уже сломал всю голову...
Ответить с цитированием
  #2 (permalink)  
Старый 19.11.2017, 18:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

Maklay,
Сообщение от Maklay
ball.style.Left
Сообщение от Maklay
ball.style.Top
Ответить с цитированием
  #3 (permalink)  
Старый 19.11.2017, 19:08
Интересующийся
Отправить личное сообщение для Maklay Посмотреть профиль Найти все сообщения от Maklay
 
Регистрация: 01.10.2017
Сообщений: 19

2 рони:
*исправлено со временем* Премного благодарен(хотя с первого раза не дошло).

Но тем не менее, при изначальной кривой реализации, когда вместо изменения стиля элемента, я просто менял по ошибке созданную характеристику объекта style (Left, Top) результат на выходе выглядит все равно странным:

При запуске по шагам с брейкпоинтом в строке 34, ball.style.Left какое-то количество шагов увеличивается на 1px как и задумано (ну с учетом изначальной ошибки), но затем, в произвольный момент(иногда даже без смены шага), становится undefinite, что соответственно завершает исполнение.

Последний раз редактировалось Maklay, 19.11.2017 в 19:28.
Ответить с цитированием
  #4 (permalink)  
Старый 19.11.2017, 19:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

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>
Ответить с цитированием
  #5 (permalink)  
Старый 19.11.2017, 20:06
Интересующийся
Отправить личное сообщение для Maklay Посмотреть профиль Найти все сообщения от Maklay
 
Регистрация: 01.10.2017
Сообщений: 19

Рони,
Основная проблема решена, мяч с учетом исправлений движется как задумано(за что еще раз выражаю благодарность). Вопрос остался, лишь при попытке произвести разбор своей ошибки.

Как работает код с неверным обращением (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 со значениями которые они приобрели.
Ответить с цитированием
  #6 (permalink)  
Старый 19.11.2017, 20:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

Maklay,
может кто-то другой прокомментирует ...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить rel у Div-ов которые в данный момент видны ssimm Events/DOM/Window 1 28.06.2015 23:52
функция style visibility evgbog Общие вопросы Javascript 0 23.09.2013 00:24
Выполнить скрипт в атрибуте style foreach Events/DOM/Window 3 27.11.2011 15:03
Можно ли как то вставить произвольный код в texarea foreach jQuery 3 30.08.2011 00:59
Kak opredelit current link i dat novi style, onclick, help armdev Events/DOM/Window 6 04.10.2009 19:03