JavaScript ClearInterval button doesn’t stop

I’ve reviewed the other clearInterval posts here for a clue as to why my code isn’t functioning as intended. Despite my best efforts, I still can’t get clearInterval to stop my count.

I’m trying to do something simple: have a count, increase by one until the stop button is pushed.

I have tried different, and incorrect variables, but I cannot find a working solution.

    <p>Count Up:</p>
    <p id="count">1</p>
    <button onclick="clearInterval(current)">Stop</button>
    <script>
      var current = 1;
      function animateValue(id) {
        var obj = document.getElementById(id);
        var current = parseInt(obj.innerHTML);
        setInterval(function () {
          current++;
          obj.innerHTML = current;
        }, 1000);
      }
      animateValue("count");
    </script>

Answer

Store the value returned by setInterval in a variable and pass that as the parameter to clearInterval instead of counter:

<p>Count Up:</p>
<p id="count">1</p>
<button onclick="clearInterval(interval)">Stop</button>
<script>
  var interval;
  var current = 1;
  function animateValue(id) {
    var obj = document.getElementById(id);
    var current = parseInt(obj.innerHTML);
    interval = setInterval(function () {
      current++;
      obj.innerHTML = current;
    }, 1000);
  }
  animateValue("count");
</script>