title: Reset counter on spacebar and onclick
body: <p>I'm trying to make a count-down that counts down from 200 to 0 in steps of 10.</p>
  
  <p>This timer can be stopped and should then be reset to 200, however, I need also the value of the moment is stopped. The countdown fills the div <code>#log</code> with <code>innerHTML</code>. Whenever I "stop" the timer, I take the value of <code>#log</code> and place it in <code>#price</code> and I hide <code>#log</code>. The problem here is that the timer continues in the background, while I want it to reset so it can be started again by clicking on start. However, it just continues counting down and only after it's done, I can start it again.</p>
  
  <p>In the example, it doesn't take so long for it to reach 0, but in the end, it'll take 15-20 seconds to reach 0, which'll be too long to wait for.</p>
  
  <p><strong>So in short:</strong> Countdown 200-0, but on click of <code>Start</code>-button or spacebar, it should stop the function running at the moment, so it can be started again.</p>
  
  <p><a href="http://codepen.io/rvervuurt/pen/obyMNb" rel="nofollow">See this PEN</a></p>
  
  <p>If you have any suggestions on how to approach it completely different, you're very welcome to share!</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;button id="btn" class="normal"&gt;Start&lt;/button&gt;
  &lt;div id="log"&gt;#&lt;/div&gt;
  &lt;div id="price"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var log = document.getElementById("log");
  var btn = document.getElementById("btn");
  var price = document.getElementById("price");
  var counting = false;
  var btnClassName = btn.getAttribute("class");
  
  function start(count) {
    if (!counting) {
      counting = true;
      log.innerHTML = count;
      var timer = setInterval(function() {
        if (count &gt;= 0) {
          log.innerHTML = count;
          count -= 10;
        }  else {
          clearInterval(timer);
          count = arguments[0];
          counting = false;
          btn.className = "normal";
        }
      }, 150);
    };
  };
  
  btn.onclick = function() {
    if (btnClassName == "normal") {
      start(200);
      price.style.display = 'none';
      log.style.display = 'block';
      btn.className = "counting";
      log.innerHTML = "";
    } else {
    }
  };
  
  document.body.onkeyup = function(e){
      if(e.keyCode == 32){
        price.innerHTML = log.innerHTML;
        price.style.display = 'block';
        log.style.display = 'none';
      }
  }
  </code></pre>