jQuery addClass example

Change class name on click in jQuery

by avgustre

HTML

<a class="left" id="button-left">Влево</a>
<a class="right" id="button-right">Вправо</a>

<div class="block">
  <div class="inner" id="block"></div>
  </div>
</div>

CSS

.block {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 100px;
  background: red;
}
.inner {
  position: absolute;
  left: 100px;
  width: 100px;
  height: 100px;
  background: blue;
}

.right {
  float: right;
}

JavaScript

let butLeft = document.getElementById('button-left');
let butRight = document.getElementById('button-right');

let speed = 100;
let blockX = 100;

function moveBlock(el, pos) { 
	blockX += speed * pos;
	el.style.left = blockX + 'px';
}

butLeft.addEventListener('click', function() {
	moveBlock(block, -1);
}); 

butRight.addEventListener('click', function() {
	moveBlock(block, 1);
});