title: How to make a single button act as a Start and Stop button in JavaScript?
body: <p>I am trying to make an image move when the user click the Start button, and the button then becomes a Stop button. at first I had 2 buttons but want it to be a single button.</p>
  
  <p>This is what I have right now.</p>
  
  <p>Html</p>
  
  <pre><code>&lt;div&gt;&lt;img id="myImage" src="car.gif" /&gt;&lt;/div&gt;
  &lt;input type="button" value="Start" onclick="startStop()" id="startButton"&gt;
  &lt;input type="button" value="Stop" onclick="stop()"&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>function init(){
  imgObj = document.getElementById('myImage');
  imgObj.style.position= 'relative';
  imgObj.style.left = '0px';
  }
  
  function startStop(){
  moveRight();
  change();
  }
  
  function moveRight(){
  imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
  animate = setTimeout(moveRight,50); 
  }
  
  function change(){
  var elem = document.getElementById("startButton");
  if (elem.value=="Stop") elem.value = "Start";
  else elem.value = "Stop";
  }
  
  function stop(){
  clearTimeout(animate);
  }
  
  window.onload =init;
  </code></pre>
  
  <p>When I click the actual Stop button it stops the image dead on its tracks and when I click Start it resumes which I want to do all in one button. Also, How would I make it so after the image exits on the right, it re-enters from the left?</p>
  
  <p>I was trying to add the <code>clearTimeout(animate);</code> between the <code>function change()</code> but that just made the buttons disappear. Any thoughts?</p>