Почему offsetTop отрабатывает некорректно?

Question

[Norwood]

В квадрате есть круг. С помощью кнопок вверх/вниз/вправо/влево перемещаю его на заданный шаг. Кнопка влево и вверх работают нормально, а вот влево и вниз- круг улетает максимально влево или вниз. Предполагаю, что дело вот в этом знаке "+"
offsetTop + `${step}`
Может кто-нибудь поможет разобраться в чём тут дело?

Answer 1

[n1ksON]

Все дело в том, что вы зачем-то числу пытаетесь прибавить не число, а строку. Получается так: 1 + '1' = 11 (number + string = string), с вычитанием работает нормально: 1 - '1' = 0 (number - string = number)

const divSquare = document.querySelector('.square');
const circle = document.querySelector('.circle');
// divSquare.hidden = false;

document.querySelector('.nbt').onclick = () => {
  const inp1 = document.querySelector('.width').value;
  divSquare.style.border = "1px solid black";
  divSquare.style.width = `${inp1}px`;
  divSquare.style.height = `${inp1}px`;
  divSquare.style.position = 'relative';
}

document.querySelector('.btnz').onclick = () => {
  const inp3 = document.querySelector('.width1').value;
  circle.style.width = `${inp3}px`;
  circle.style.height = `${inp3}px`;
  circle.style.borderRadius = "100%";
  circle.style.background = "rgba(0, 0, 0, .3)";
  circle.style.position = 'absolute';
  circle.style.top = '50%';
  circle.style.left = '50%';
  circle.style.transform = 'translate(-50%, -50%)';
}

document.querySelector('.btnGroup').addEventListener('click', event => {
  let step = +document.querySelector('.width2').value;
  let action = event.target.innerText;
    switch (action) {
      case "Up":
        circle.style.top = circle.offsetTop - step + 'px';
        break;
      case "Left":
        circle.style.left = circle.offsetLeft - step + 'px';
        break;
      case "Down":
        circle.style.top = circle.offsetTop + step + 'px';
        break;
      case "Right":
        circle.style.left = circle.offsetLeft + step + 'px';
        break;
    }
});

Comments

[Norwood]

спасибо)