Moving an image with Javascript onclick?

Question

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!

jQuery animate function can help you ;)

Husni Salax
– Husni Salax

2016-04-27 20:53:14 +00:00
Commented Apr 27, 2016 at 20:53 — Husni Salax
– Husni Salax, Commented Apr 27, 2016 at 20:53

tnschmidt · Accepted Answer · 2016-04-27 21:14:25Z

2

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>

edited Apr 27, 2016 at 21:14

answered Apr 27, 2016 at 20:54

tnschmidt

1,2061 gold badge8 silver badges17 bronze badges

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

3 Comments

aaronofleonard Over a year ago

style="position: relative; transform: translateX(20px) translateX(20px) translateX(20px) translateX(20px) translateX(20px);"

Yeeesh...

tnschmidt Over a year ago

@Amleonard, little better now!

aaronofleonard Over a year ago

Very nice very nice!

Husni Salax · Accepted Answer · 2016-04-27 20:51:54Z

1

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.net/schadeck/ptGws/

answered Apr 27, 2016 at 20:51

Husni Salax

2,0181 gold badge21 silver badges30 bronze badges

Comments

aaronofleonard · Accepted Answer · 2016-04-27 20:54:49Z

1

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!

answered Apr 27, 2016 at 20:54

aaronofleonard

2,57617 silver badges24 bronze badges

Comments

vvye · Accepted Answer · 2016-04-27 21:03:45Z

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.

Collectives™ on Stack Overflow

Moving an image with Javascript onclick?

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related