Make a function clickable only while a timer is running
<p>I am attempting to learn JavaScript/jQuery and I am trying to create a simple countdown app. The user can set the amount of time and then click on the displayed value to start the countdown. While the countdown is happening, if the user clicks the displayed value again, I want to pause the countdown (please note that in my code I am simply using an alert message because I haven't gotten to the part of coding the pause yet). So far, everything appears to work. However, when the countdown has ended, the user should be able to choose a new countdown time and again click the display to start the countdown. However, when I click on the display, it runs the alert message multiple times before starting the countdown. Basically, the user should be able to click the display while the timer is running to pause the countdown. If the countdown is not running, then clicking the display should cause simply start a new countdown.</p>

<p>Here is my HTML:</p>

<blockquote>
<pre><code>  &lt;div class="value-display"&gt;
  &lt;button class="btn" id="increase" onclick="increase()"&gt;+&lt;/button&gt;
  &lt;h1 id="display" onclick="startTimer()"&gt;5&lt;/h1&gt;
  &lt;button class="btn" id="decrease" onclick="decrease()"&gt;-&lt;/button&gt;
  &lt;/div&gt;
</code></pre>
</blockquote>

<p>Here is my JavaScript:</p>

<pre><code>var total = 5;
var counter;

function increase() {
  total += 1;
  document.getElementById("display").innerHTML = total;
}

function decrease() {
  if (total &gt; 0) {
    total -= 1;
    document.getElementById("display").innerHTML = total;
  }
}

function startTimer() {
  counter = setInterval(timer, 1000);
}

function timer() {
  if (total === 0) {
    document.getElementById("increase").disabled = false;
    document.getElementById("decrease").disabled = false;
    clearInterval(counter);
    return total;
  } else if (total &gt; 0) {
    total -= 1;
    document.getElementById("increase").disabled = true;
    document.getElementById("decrease").disabled = true;
    document.getElementById("display").innerHTML = total;

    $("#display").click(function() {
      alert("ok");
    })
  }
}
</code></pre>

<p>Here is the codepen:</p>

<p><a href="http://codepen.io/jv1149/pen/PzqKqQ/" rel="nofollow">http://codepen.io/jv1149/pen/PzqKqQ/</a></p>