title: Javascript. Button to stop code from running
body: <p>I am making little reaction game for fun as I am new to this, It's quite a big challenge, so, I ran into the problem, how do I make script to stop from running when the button is pressed, I've managed to start everything when the start is clicked, but can't stop it from running.
  Maybe anyone have any ideas how to make this happen? Here's my code so far:</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>        &lt;button id="start"&gt;Start&lt;/button&gt;
  
          &lt;button id="stop"&gt;Stop&lt;/button&gt;
  
          &lt;button id="reset"&gt;Reset&lt;/button&gt;
  
          &lt;p&gt;Your reaction time: &lt;u&gt;&lt;span id="timeTaken"&gt;&lt;/span&gt;&lt;/u&gt;&lt;/p&gt;
  
          &lt;p&gt;Your average reaction time: &lt;u&gt;&lt;span id="average"&gt;&lt;/span&gt;&lt;/u&gt;&lt;/p&gt;
  
          &lt;p&gt;Your best reaction time: &lt;u&gt;&lt;span id="best"&gt;&lt;/span&gt;&lt;/u&gt;&lt;/p&gt;
  
          &lt;div id="shape"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And here's my javascript:</p>
  
  <pre><code>        var start = new Date().getTime(); 
  
          function getRandomColor() {     //generates random color
  
              var letters = '0123456789ABCDEF'.split('');
  
              var color = '#';
  
              for (var i = 0; i &lt; 6; i++ ) {
  
                  color += letters[Math.floor(Math.random() * 16)];
  
              }
  
              return color;
  
          }
  
          function makeShapeAppear() {      //makes that shape appear on screen
  
              var top = Math.random() * 400;
  
              var left = Math.random() * 400;
  
              var width = (Math.random() * 200) + 100;
  
              if (Math.random() &gt; 0.5) {
  
                  document.getElementById("shape").style.borderRadius = "50%"
  
              } else {
  
                  document.getElementById("shape").style.borderRadius = "0";
  
              }
  
              document.getElementById("shape").style.backgroundColor = getRandomColor();
  
              document.getElementById("shape").style.top = top + "px";
  
              document.getElementById("shape").style.left = left + "px";
  
              document.getElementById("shape").style.width = width + "px";
  
              document.getElementById("shape").style.height = width + "px";
  
              document.getElementById("shape").style.display = "block";
  
              start = new Date().getTime();
  
          }
  
          function appearAfterDelay() {    //makes that shape appear after some delay
  
              setTimeout(makeShapeAppear, Math.random() * 3000);
  
          }
  
          document.getElementById("reset").onclick = function() {   //reset button, so when you click it, everything resets
  
              location.reload();
  
          }
  
          var totaltime = 0;
  
          var totalgames = 0;
  
          document.getElementById("start").onclick = function() { //start button, so when you click it, shapes start appearing and time's running
  
              appearAfterDelay();
  
              document.getElementById("shape").onclick = function() {
  
                  document.getElementById("shape").style.display = "none";
  
                  var end = new Date().getTime();
  
                  var timeTaken = (end - start) / 1000;
  
                  totaltime += timeTaken;
  
                  totalgames += 1;
  
                  var notroundaverage = (totaltime / totalgames);
  
                  var roundaverage = notroundaverage.toFixed(3);
  
                  document.getElementById("timeTaken").innerHTML = timeTaken + " s";
  
                  document.getElementById("average").innerHTML = roundaverage + " s";
  
                  appearAfterDelay();
  
              }
  
          }
  </code></pre>