How to move an image when it is clicked on Javascript?

Question

I'm currently making a Javascript/HTML/CSS game and I need a specific image to move one pixel to the side when that image is clicked. Here's my code for each part:

<input id="test" type="image" src="https://discussions.apple.com/___sbsstatic___/migration-images/200/20011164-1.gif" alt="SUBMIT"></input>

CSS:

#test {
    position: absolute;
    left:10px;
    top:227px;
    z-index: 1;
    width: 50px;
}

JS:

document.getElementById("test").onclick = function () {
    // stuff should hopefully be going here soon!
};

I'm using Bootstrap and JQuery 2.x (edge).

Answer 1

If you're using jQuery, you can update an elements CSS like so:

$("#test").on("click",function(){
  $(this).css("left","1px");
});

This is a simple answer to a simple question. If you're making a game, there may be a more indepth way to tackle your mechanics. But this is jQuery syntax to do what you asked.