title: How do you place an image and make it move using Javascript?
body: <p>CSS:</p>
  
  <pre><code>#sharks {
      content:url(sharks.jpg);
      position:absolute;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var winHeight = window.innerHeight;// get the window height &amp; width
  var winWidth = window.innerWidth;
  var clock;
  var index = 0;
  
  function do_move(image) {
      fish = document.getElementById(image);
      horz = fish.style.left;
      horz = parseInt(horz.substring(0,horz.length-2));
      fish.style.left = (horz+1)+'px';
  }
  
  function add_shark() {
  
      var height = Math.floor((Math.random()*winHeight)+100);
      var image = document.createElement("IMG");
      image.setAttribute("id", "sharks" + index);
      image.setAttribute("style", "position:absolute;top:"+height+"px;left:0px;");
      document.body.appendChild(image);
      do_move(image.id);
      index++;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input type="button" value="Add a Shark" onclick="add_shark();"&gt;
  </code></pre>
  
  <p>Looking at this code, I am hoping the use the button in the HTML to place an image of a shark on one side of the screen that will simply move to the other side. </p>
  
  <p>Currently, this code places a shark on the screen on the left side, at a random Y point, but it doesn't move. </p>
  
  <p>Any help would be greatly appreciated. </p>