Не получается отслеживать перемещение блока, скажите почему?

Question

JS

let du = document.querySelector('input');
let div = document.querySelector('div');
div.style.left = '0px';
let time;
du.onclick = function(){
  time = setInterval(() => div.style.left = (parseInt(div.style.left) + 1) + 'px', 10);
}
if(div.style.left == '300px'){
  clearInterval(time);
}

HTML

<!DOCTYPE html>
<html>
  <body>
    <input type='button' value='1'>
    <div></div>
  </body>
</html>

Блок перемещается, но отследить перемещение не выходит

Answer 1

Нужно отслеживать в самом setInterval-е, а так в коде if проверяется только 1 раз.

let du = document.querySelector('input');
let div = document.querySelector('div');
div.style.left = '0px';
let time;
du.onclick = function(){
  time = setInterval(() => {
    div.style.left = (parseInt(div.style.left) + 1) + 'px';
    if(div.style.left == '300px'){
      clearInterval(time);
      alert('finish');
    } 
  }, 10)
}

div{
  width: 100px;
  height: 100px;
  border: 1px solid;
  position: relative;
}

<!DOCTYPE html>
<html>
  <body>
    <input type='button' value='1'>
    <div></div>
  </body>
</html>

БЛОГ НА HUSL

Не получается отслеживать перемещение блока, скажите почему?

Ответы (1 шт):