How to start and stop/pause setInterval?

I’m trying to pause and then play a setInterval loop.

After I have stopped the loop, the “start” button in my attempt doesn’t seem to work :

input = document.getElementById("input");

function start() {
  add = setInterval("input.value++", 1000);
}
start();

<input type="number" id="input" />
<input type="button" onclick="clearInterval(add)" value="stop" />
<input type="button" onclick="start()" value="start" />

Is there a working way to do this?

Answer

The reason you’re seeing this specific problem:

JSFiddle wraps your code in a function, so start() is not defined in the global scope.

---

Moral of the story: don’t use inline event bindings. Use addEventListener/attachEvent.

---

Other notes:

Please don’t pass strings to setTimeout and setInterval. It’s eval in disguise.

Use a function instead, and get cozy with var and white space:

var input = document.getElementById("input"),
  add;

function start() {
  add = setInterval(function() {
    input.value++;
  }, 1000);
}

start();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="input" />
<input type="button" onclick="clearInterval(add)" value="stop" />
<input type="button" onclick="start()" value="start" />