move image on each click Javascript

Question

I want to move an image on each click but using this code works only on one click.

function moveright() {
  console.log("moveright invoked.");
  var myImg = document.getElementById("image");
  myImg.style.position = "absolute";
  var cLeft = myImg.style.left;
  if (cLeft == 500) {
    console("Maximum reached.");
  } else {
    myImg.style.left = (cLeft + 50) + "px";
  }
}

<img id="image" src="https://i.sstatic.net/TiYE3.jpg?s=32&g=1" onclick="moveright()" />

I have added snippet for you. See the function is getting invoked. — Satpal
– Satpal, Commented Dec 18, 2017 at 9:39
Please do console.log(cLeft + 50); to see what you get. It is not doing what you think it is. — Nope
– Nope, Commented Dec 18, 2017 at 9:41

Nisarg Shah · Accepted Answer · 2017-12-18 09:40:23Z

4

Give an initial left position value. You can add an inline style like this: style="left: 0px"
Parse the left value to an integer before adding 50 px to it: var cLeft = parseInt(myImg.style.left);

function moveright() {
  var myImg = document.getElementById("image");
  myImg.style.position = "absolute";
  var cLeft = parseInt(myImg.style.left);
  
  if (cLeft == 500) {
    console("Maximum reached.");
  } else {
    myImg.style.left = (cLeft + 50) + "px";
  }  
}

<img id="image" src="https://i.sstatic.net/TiYE3.jpg?s=32&g=1" onclick="moveright()"  style="left: 0px" />

Alternatively, you can skip the left style declaration and get the computed style value using window.getComputedStyle.

function moveright() {
  var myImg = document.getElementById("image");
  myImg.style.position = "absolute";
  
  var cLeft = parseInt(window.getComputedStyle(myImg).left);
  
  if (cLeft == 500) {
    console("Maximum reached.");
  } else {
    myImg.style.left = (cLeft + 50) + "px";
  }  
}

<img id="image" src="https://i.sstatic.net/TiYE3.jpg?s=32&g=1" onclick="moveright()" />

answered Dec 18, 2017 at 9:40

Nisarg Shah

14.6k6 gold badges38 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nope Over a year ago

Thoppil: In general When using getComputedStyle please ensure to read the getComputedStyle Notes Section to be aware of it's possibly different results. Specifically The returned value is, in certain known cases, expressly inaccurate by deliberate intent. - This is a general comment to ensure OP is aware of it before potentially using it beyond the scope of this question and not reflecting anything in the answer.

Laxmikant Dange · Accepted Answer · 2017-12-18 09:48:53Z

2

Use parseInt, as style.left has value in px. If style.left is empty, pass 0 as initial value.

function moveright() {
  var myImg = document.getElementById("image");
  myImg.style.position = "absolute";
  var cLeft = parseInt(myImg.style.left || 0);

  if (cLeft == 500) {
    alert("Maximum reached.");
  } else {
    myImg.style.left = (cLeft + 50) + "px";
  }
}

<img id="image" src="https://i.sstatic.net/TiYE3.jpg?s=32&g=1" onclick="moveright()" />

edited Dec 18, 2017 at 9:48

answered Dec 18, 2017 at 9:41

Laxmikant Dange

7,7386 gold badges43 silver badges67 bronze badges

Collectives™ on Stack Overflow

move image on each click Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related