Repeating a setInterval
<p>I'm currently using a <code>setInterval</code> function in JavaScript for an HTML page. It has a button that allows me to start a countdown from 10 to 0 with a 1 second interval, and every time I press the button the countdown is supposed to reset. However, after the first button press the next countdown messes up the interval badly.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var count;

function countdown() {
  count = 10;
  var repeat = setInterval(reduce, 1000);
}

function reduce() {
  if (count &gt; 0) {
    document.getElementById('number').innerHTML = count;
    count--;
  } else {
    clearInterval(repeat);
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Page 4&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;button style=" display: inline-block; " onclick="countdown()"&gt;Start Count Down&lt;/button&gt;
  &lt;div style=" display: inline-block;" id="number"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>