0

var box = document.querySelector('.box');
var width = box.offsetWidth;

document.querySelector('#prev').onclick = function() {
  box.style.left = width + 'px'
}
.box {
  height: 150px;
  width: 150px;
  background: #000;
  position: absolute;
  left: 300px;
  top: 10%;
}
<button id="prev">prev</button>
<div class="box"></div>
<button id="next">next</button>

4
  • Добавь кнопкам атрибут onclick И опиши в функциях эти document.style
    – Machitor
    10 сен 2017 в 13:54
  • <button id="prev" onclick="prev()">prev</button>; function prev(){ box.style.left = width +'px' }; Так же срабатывает один раз
    – Mario
    10 сен 2017 в 13:59
  • я не могу понять логику, подскажите, почему срабатывает только один раз ? я примерно понимаю, что по заверению функции, она стирается, но как сделать чтобы она повторялась каждый раз снова и снова по клику. У меня небольшой опыт
    – Mario
    10 сен 2017 в 14:14
  • потому что из разу в разу устанавливает одно и то же значение?
    – etki
    10 сен 2017 в 14:24

1 ответ 1

3

ты просто не то выбрал.

var box = document.getElementsByClassName('box')[0];
var prev = document.getElementById('prev');
var next = document.getElementById('next');

prev.addEventListener('click', function() {
  box.style.transform += 'translateX(1px)';

})


next.addEventListener('click', function() {
  box.style.transform += 'translateX(-1px)';

})
.box {
  height: 150px;
  width: 150px;
  background: #000;
  position: absolute;
  left: 300px;
  top: 10%;
}
<button id="prev">prev</button>
<div class="box"></div>
<button id="next">next</button>

Еще второй вариант

const box = document.getElementsByClassName('box')[0],
  prev = document.getElementById('prev'),
  next = document.getElementById('next');

function _count(direction) {
  let positionElemX = parseInt(getComputedStyle(box)["left"]);

  if (direction === '_next') {
    box.style.left = (positionElemX + 1) + 'px';
  } else if (direction === '_prev') {
    box.style.left = (positionElemX - 1) + 'px';
  }
}

prev.addEventListener('click', function() {
  _count('_prev')
})
next.addEventListener('click', function() {
  _count('_next')
})
.box {
  height: 150px;
  width: 150px;
  background: #000;
  position: absolute;
  left: 300px;
  top: 10%;
}
<button id="prev">prev</button>
<div class="box"></div>
<button id="next">next</button>

3
  • как у тебя может двигаться элемент, если ты его не двигаешь, а просто задаешь позицию? подумай!!!
    – Air
    10 сен 2017 в 15:08
  • кажется я догнал)) спс
    – Mario
    10 сен 2017 в 15:19
  • Ой.. Такая куча translate'ов навешивается...
    – Qwertiy
    10 сен 2017 в 15:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.