Reset counter on spacebar and onclick

Question

I'm trying to make a count-down that counts down from 200 to 0 in steps of 10.

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 #log with innerHTML. Whenever I "stop" the timer, I take the value of #log and place it in #price and I hide #log. 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.

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.

So in short: Countdown 200-0, but on click of Start-button or spacebar, it should stop the function running at the moment, so it can be started again.

See this PEN

If you have any suggestions on how to approach it completely different, you're very welcome to share!

HTML

<button id="btn" class="normal">Start</button>
<div id="log">#</div>
<div id="price"></div>

JS

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 >= 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';
    }
}

Answer 1

I "re-code" your code because there are several issues there.

Just read the code and tell me if that's you are looking for or if you have any questions..

var log = document.getElementById("log");
var btn = document.getElementById("btn");
var price = document.getElementById("price");
var counting = false;
var timer;
var c = 0;

function start(count) {
  btn.blur();
  if (!counting) {
    c = count;
    counting = true;
    log.innerHTML = count;
    timer = setInterval(tick, 1500);
    tick();
  };
};

function tick() {
  if (c >= 0) {
    log.innerHTML = c;
    c -= 10;
  } 
  else {
    clearInterval(timer);
    c = arguments[0];
    counting = false;
    btn.className = "normal";
  }
}

btn.onclick = function() {
  resetTimer();
  var btnClassName = btn.getAttribute("class");
  if (btnClassName == "normal") {
    price.style.display = 'none';
    log.style.display = 'block';
    btn.className = "counting";
    log.innerHTML = "";
    start(200);
  } else {
    pause();
  }
};

document.body.onkeyup = function(e) {
  if(e.keyCode == 32) {
    e.preventDefault();
    pause();
  }
}

function pause() {
  resetTimer();
  price.innerHTML = log.innerHTML;
  price.style.display = 'block';
  log.style.display = 'none';
  btn.className = 'normal';
  counting = false;
}

function resetTimer() {
  clearInterval(timer);
}

body { font: 100% "Helvetica Neue", sans-serif; text-align: center; }

/*#outer {
width: 400px;
height: 400px;
border-radius: 100%;
background: #ced899;
margin: auto;
}

#inner {
width: 350px;
height: 350px;
border-radius: 100%;
background: #398dba;
margin: auto;
}*/

#log, #price { 
  font-size: 500%; 
  font-weight: bold; 
}

<div id="outer">
  <div id="inner">
    <div id="arrow">
    </div>
  </div>
</div>
<button id="btn" class="normal">Start</button>
<div id="log">#</div>
<div id="price"></div>