title: How to make an image move by clicking on a button with Javascript?
body: <p>I need to write a javascript code inside an HTML document that has the following behavior:
  When a button is clicked, an image starts moving (if it is not already moving), one pixel to the left per second. When a second button is clicked, the image stops moving and immediately gets repositioned to its original coordinates.</p>
  
  <p>I get everything to work, except for the "Button" that says "START". Right now if I click the image the image moves left 1 pixel per second. However I need to carry that function over to the button called START. </p>
  
  <p>Does anyone know how to do this?
  Thank you!!</p>
  
  <p>My code is as follow:</p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;
  
  
  &lt;script&gt;
  
  var timerid = null;
  
  
  function move()
  {
  document.getElementById('cat').style.right = 
      parseInt(document.getElementById('cat').style.right) + 1 + 'px';    
  }
  
  window.onload=function()
  {   
  
  
  
  document.getElementById('cat').onclick=function(){
  
      if(timerid == null){
          timerid = setInterval("move()", 10);
      }else{
          clearInterval(timerid);
          timerid = null;
      }
  }   
  
  
  var button2 = document.getElementById('button2');
  button2.onclick= reloadPage;
  
      function reloadPage(){
          window.location.reload();
      }
  
  }
  
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;img id="cat" src="cat.jpg" style="position:absolute;right:5px"/&gt;
  
  &lt;div&gt;
  &lt;button id="button1" type="button" style="position:absolute;left:10px;top:190px"/&gt;START&lt;/button&gt;
  &lt;button id="button2" type="button" style="position:absolute;left:10px;top:220px"/&gt;STOP &amp; RESET&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>