I have a webpage that contains an image and some links. Each of the links execute different functions when clicked.

When a certain link is clicked, I call a function called move. When this link is clicked, I need the image (bird) to move 20px to the right.

So far, my function looks like this:

function move(e) {
   bird.style.position = "relative";
   bird.style.left += "20px";
   e.preventDefault();     //prevents the page from redirecting
}

This works, but only one time. When I click the link, bird will move 20px to the right, but this will only happen once. I need the photo to move 20 more px EVERY time the link is clicked. A friend told me to "parse it before adding it" but I'm not really sure what they mean. What should I be parsing? Any suggestions/help are very appreciated. Thanks!

I have a webpage that contains an image and some links. Each of the links execute different functions when clicked.

When a certain link is clicked, I call a function called move. When this link is clicked, I need the image (bird) to move 20px to the right.

So far, my function looks like this:

function move(e) {
   bird.style.position = "relative";
   bird.style.left += "20px";
   e.preventDefault();     //prevents the page from redirecting
}

This works, but only one time. When I click the link, bird will move 20px to the right, but this will only happen once. I need the photo to move 20 more px EVERY time the link is clicked. A friend told me to "parse it before adding it" but I'm not really sure what they mean. What should I be parsing? Any suggestions/help are very appreciated. Thanks!

• javascript

• jQuery animate function can help you ;) – Husni Salax Commented Apr 27, 2016 at 20:53

4 Answers 4

You can add an event listener to your link and then use the tranform: translateX(20px) CSS rule to move the element. The translateX will move the element from where it is currently on the page.

var bird = document.getElementById("img");
var link = document.getElementById("link");
link.addEventListener("click", move);

var birdX = 0;
function move(e) {
   birdX += 20;
   bird.style.position = "relative";
   bird.style.transform = "translateX(" + birdX + "px)";
   e.preventDefault();     //prevents the page from redirecting
}

div{ /*just for effect*/ 
  border:1px solid brown; 
  display:inline-block;
}
a{
  cursor:pointer;
  text-decoration:underline;
}

<div id="img">bird</div>
<br>
<a id="link">Link</a>

Here we go:

HTML:

<div id="block"></div>
<button id="go">&raquo; Run</button>

jQuery:

$("#go").click(function(){
  var dest = parseInt($("#block").css("margin-left").replace("px", "")) + 100;
    if (dest > 500) {
        $("#block").animate({
            marginLeft: "10px"
          }, 500 );
    }
    else {
      $("#block").animate({
        marginLeft: dest + "px"
      }, 500 );
    }
});

CSS:

div { width: 20px; height: 20px; background: green; margin: 10px; }

Hope it helps;)

http://jsfiddle/schadeck/ptGws/

function move(e) {
   var left = parseInt(bird.style.left);

   bird.style.position = "relative";
   bird.style.left = (left+20)+"px";
   e.preventDefault();     //prevents the page from redirecting
}

This is the closest to your original code but I don't like it that much. I'd more prefer something like:

var offsetLeft = 0;

function move(e) {
   offsetLeft += 20;

   bird.style.position = "relative";
   bird.style.left = (offsetLeft)+"px";
   e.preventDefault();     //prevents the page from redirecting
}

But that does create an extra variable, what a world!

bird.style.left += "20px" will only work once because you're building a string — with the next click, the left property will be 20px20px, and that's not valid CSS.

What your friend may mean by parsing is "convert the position value to an integer, add 20, and then set the left property to that instead of appending it". That's what praguan's answer does, it looks like — it'll work, but it may not be what you're looking for if you're not using jQuery. (Not everyone is.)

I think we could do without the parsing, and instead use a separate variable to keep track of the position:

<img id="bird" src="http://placehold.it/150" />
<br />
<a id="move-link" href="#">move the image</a>

var bird = document.getElementById('bird');
var moveLink = document.getElementById('move-link');
var position = 0;

bird.style.position = 'relative';

moveLink.onclick = function() {
  position += 20;
  bird.style.left = position + 'px';
}

Here's a JSfiddle showing how it could be done.