Function to move an image when image is clicked?

Question

I have an html file called index.html, and it has this div in there

  <body>
     <div id="rock"> <img src="rock.PNG" alt="rock" onclick="test()"> </div>
     <div id="paper"> <img src="paper.PNG" alt="rock"></div>
     <div id="scissors"> <img src="scissors.PNG" alt="rock">  </div>

test is my function, and its within the same file and its written here

 <script type="text/javascript">
    function test(){
      var elem = document.getElementById("rock");
      var pos = 0;
      var id = setInterval(frame, 10);
      function frame() {
        if (pos == 350) {
          clearInterval(id);
        } else {
          pos++;
          elem.style.top = pos + 'px';
          elem.style.left = pos + 'px';
        }
      }
    }
  </script>

but when my page runs I click the image, and it does not move. the image is displayed, and the onclick does work (i tested it with alert) but the image won't move... any ideas?

Answer 1

You need to specify the position attribute, likely relative. You could also use absolute or fixed positioning if one of those fits your needs better.

#rock, #paper, #scissors {
    position: relative;
}