Как заставить двигаться объект в javascript?

Question

Как сделать так чтобы данный круг, с каждой итерацией цикла передвигался на 1 px ?
`let ball = document.querySelector(".ball");
let b = true;
while (b == true) {
    ball.style.left = ball.style.left + 1;
};
`
Вот так вот не работает.

Answer 1

let ball = document.querySelector(".ball");
let b = true;
ball.style.position = 'absolute';

while (b == true) {
  var left = ball.style.left;
  left = left.replace(/[^0-9]/g, '');
  left = Number(left) + Number(1) + 'px'; // || '%'
  ball.style.left = left;
};

Answer 2

Тут несколько проблем:

В бесконечном цикле весь UI зависнет и не будет видно эффекта. Для начала можно воспользоваться setInterval. В дальнейшем перейти например на requestAnimationFrame
Изначально ball.style.left равен пустоте. Никакого значения нет. Пустая строка. Поэтому прибавление числа ничего не даст.
ball.style.left оперирует пикселями. Поэтому просто прибавление числа ничего не даст. Нужно ещё дописывать единицы измерения для перемещения, например пиксели

let ball = document.querySelector(".ball");

setInterval(() => {
  ball.style.left = parseInt(ball.style.left || 0) + 1 + 'px';
}, 100);

.ball {
  width: 20px;
  height: 20px;
  border: 1px solid black;
  position: relative;
}

<div class="ball"></div>

БЛОГ НА HUSL

Как заставить двигаться объект в javascript?

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