Как с помощью JavaScript изменить значение параметра transform в элементе div?

Question

Ильхам

css , javascript

Как с помощью JavaScript изменить значение параметра transform в элементе div?

Я изучаю JS и пытаюсь перемещать квадрат, изменяя параметры `transform` в блоке div для координат X и Y. У меня возникла проблема - при клике на одну кнопку блок перемещается только по оси X, как и должно быть, но при клике на другую кнопку блок перемещается и по оси X, и по оси Y, хотя должен перемещаться только по оси Y. Подскажите, где может быть ошибка в коде.

https://codepen.io/zocdoobn-the-selector/pen/ExrNBxR

5 ноября 2023 г. 20:48

Ответы на вопрос 3

Похожие вопросы

Answer 1

Ошибка в коде заключается в том, что переменные `posTop` и `posLeft` объявлены глобально, и их значения накапливаются после каждого клика на кнопку, что приводит к неправильному передвижению блока.

Чтобы исправить ошибку, объявите эти переменные внутри обработчика события `click` для каждой кнопки:

```javascript
document.getElementById("button1").addEventListener("click", function () {
    var posTop = 0;
    var posLeft = 0;
    posTop -= 50;
    document.getElementById("square").style.transform = "translate(" + posLeft + "px, " + posTop + "px)";
});

document.getElementById("button2").addEventListener("click", function () {
    var posTop = 0;
    var posLeft = 0;
    posLeft += 50;
    document.getElementById("square").style.transform = "translate(" + posLeft + "px, " + posTop + "px)";
});
```

Теперь при клике на кнопку блок будет перемещаться только по указанным осям.

Answer 2




const steps = [ 0, 0 ];
const stepSize = 30;

const box = document.querySelector('#box');

document.querySelectorAll('[data-step]').forEach(n => n.addEventListener('click', onClick));

function onClick() {
  this.dataset.step.split(',').forEach((n, i) => steps[i] += +n);
  box.style.transform = `translate(${steps.map(n => n * stepSize + 'px').join(',')})`;
}

Answer 3

function getCurrentOffset(s) {
  return s.split(",", 2).map((n) => Number(n.replace(/\D/g, "")));
}
function right2_m() {
  const box = document.getElementById("box");
  let [left, top] = getCurrentOffset(box.style.transform);
  box.style.transform = `translate(${left+30}px,${top}px)`;
}
function bottom2_m() {
  const box = document.getElementById("box");
  let [left, top] = getCurrentOffset(box.style.transform);
  box.style.transform = `translate(${left}px,${top+30}px)`;
}