Resetting position based on style.right

Question

I was trying to reset animation when the image reaches right-most edge of the screen.

Everything works perfectly fine without this line:

if (imgObj.style.right == 0) {
    Reset();
}

Is it not the right way?

 <!-- var imgObj = null; var animate; function init() { imgObj = document.getElementById('myImage'); imgObj.style.position = 'relative'; imgObj.style.left = '0px'; } function moveRight() { imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px'; animate = setTimeout(moveRight, 2000); // call moveRight in 20msec if (imgObj.style.right == 0) { Reset(); } } function Reset() { clearTimeout(animate); imgObj.style.left = '0px'; } window.onload = init; //--> 

 <form> <img id="myImage" src="http://jsfiddle.net/img/logo.png" /> <p>Click the buttons below to handle animation</p> <input type="button" value="Start" onclick="moveRight();" /> <input type="button" value="Reset" onclick="reset();" /> </form> 

How to get the animation working along with that above line ?

Answer 1

You have some mistakes

1. onclick="Reset();" not onclick="reset();"

2. parseInt(imgObj.style.left.replace("px","")) not parseInt(imgObj.style.left)

3. imgObj.style.right is always "" you have to set some thing like imgObj.style.left.replace("px","")>200

 var imgObj = null; var animate; function init() { imgObj = document.getElementById('myImage'); imgObj.style.position = 'relative'; imgObj.style.left = '0px'; } function moveRight() { imgObj.style.left = parseInt(imgObj.style.left.replace("px","")) + 10 + 'px'; animate = setTimeout(moveRight, 2000); // call moveRight in 20msec if (parseInt(imgObj.style.left.replace("px",""))+ imgObj.width>= window.innerWidth) { Reset(); } } function Reset(){ clearTimeout(animate); imgObj.style.left = '0px'; } window.onload = init; 

 <form> <img id="myImage" src="http://jsfiddle.net/img/logo.png" /> <p>Click the buttons below to handle animation</p> <input type="button" value="Start" onclick="moveRight();" /> <input type="button" value="Reset" onclick="Reset();return false;" /> </form>