i need move photo left and right using onclick event-CodePudding

et left = document.querySelector('#left');

let right = document.querySelector('#right');

let counter = 1;

let img_contant = document.querySelector('.img_contant');

let size = img_contant.clientWidth;

let increment = function () { img_contant.style = margin-left: counter * size px; counter ; console.log(counter); }

let decrement = function () { img_contant.style = margin-left: counter * size px; counter--; console.log(counter); }

left.addEventListener('click', decrement);

right.addEventListener('click', increment);

CodePudding user response：

In your increment and decrement code, you are not using the style.marginLeft property which is intended. check the below code

let left = document.querySelector('#left');

let right = document.querySelector('#right');

let counter = 0;

let img_contant = document.querySelector('.img_contant');

let size = img_contant.clientWidth;

const increment = function () {
  counter  ;
  img_contant.style.marginLeft = `${counter * size}px`;   
 }

const decrement = function () {
  counter--;
  img_contant.style.marginLeft = `${counter * size}px`;
 }

left.addEventListener('click', decrement);

right.addEventListener('click', increment);

<button id="left"> Left </button>
<button id="right"> Right </button>
<div>
<img  src="https://st.depositphotos.com/1000459/2436/i/450/depositphotos_24366251-stock-photo-soccer-ball.jpg" height = 200 width = 200 />
</div>

CodePudding user response：

Style attributes are converted from dash-case to camelCase for the style property.

img_contant.style.marginLeft = counter * size 'px';