# Buttons to start and stop a timer in JavaScript

Let's now make two buttons: by clicking on the first one, let the timer start, and by clicking on the second one, it will stop. Here everything will not be so simple and a trap awaits us. In order to understand the essence of this trick, I will describe the creation of the code in steps.

So, we make two buttons:

`<button id="start">start</button> <button id="stop">stop</button>`

We get references to these buttons into variables:

`let start = document.querySelector('#start'); let stop = document.querySelector('#stop');`

By pressing the first button, we start the timer by writing its number to a variable:

`start.addEventListener('click', function() { let timerId = setInterval(function() { console.log('!') }, 1000); });`

And now we'll stop the timer by pressing the second button:

`start.addEventListener('click', function() { let timerId = setInterval(function() { console.log('!') }, 1000); }); // Stopping the timer: stop.addEventListener('click', function() { clearInterval(timerId); });`

However, if we try to run the above code, we are in for a surprise: when we try to stop the timer, we find that the variable `timerId` is equal to `undefined`! Why did it happen? Therefore, when starting the timer, we made our variable `timerId` local inside the function bound to the `start` button.

To solve the problem, let's make the `timerId` variable global - in this case, it will be available both in the timer start function and in the stop function:

`let timerId; // makes the variable global start.addEventListener('click', function() { timerId = setInterval(function() { console.log('!') }, 1000); }); stop.addEventListener('click', function() { clearInterval(timerId); });`

Let a variable be given that initially stores the number `100`. There are also two buttons. By pressing the first button, start the timer, which every second will decrease the value of the variable by `1` and output the new value to the console. As soon as the value of the variable reaches zero, stop the timer.

Stop the timer by pressing the second button. Also stop the timer if the second button was not pressed, but the value of the variable reached zero.

Some programmer wrote a code that, when a button is pressed, starts a timer that prints the current time to the console:

`<input type="submit" id="start" value="start"> <input type="submit" id="stop" value="stop">` `let start = document.querySelector('#start'); let stop = document.querySelector('#stop'); start.addEventListener('click', function() { let timerId = setInterval(function() { let date = new Date; console.log(date.getMinutes() + ' ' + date.getSeconds()); }, 1000); }); stop.addEventListener('click', function() { clearInterval(timerId); });`

After running the code, however, it turned out that the stop button didn't work. Please fix the code author's mistake.

Another programmer also wrote code to solve the previous problem:

`<input type="submit" id="start" value="start"> <input type="submit" id="stop" value="stop">` `let start = document.querySelector('#start'); let stop = document.querySelector('#stop'); let timerId; start.addEventListener('click', function() { let timerId = setInterval(function() { let date = new Date; console.log(date.getMinutes() + ' ' + date.getSeconds()); }, 1000); }); stop.addEventListener('click', function() { clearInterval(timerId); });`

After running the code, however, again it turned out that the stop button did not work. Fix the code author's mistake.

Another programmer also wrote code to solve the previous problem:

`<input type="submit" id="start" value="start"> <input type="submit" id="stop" value="stop">` `let start = document.querySelector('start'); let stop = document.querySelector('stop'); let timerId; start.addEventListener('click', function() { setInterval(function() { let date = new Date; console.log(date.getMinutes() + ' ' + date.getSeconds()); }, 1000); }); stop.addEventListener('click', function() { clearInterval(timerId); });`

After running the code, however, again it turned out that the stop button did not work. Fix the code author's mistake.

Another programmer also wrote code to solve the previous problem:

`<input type="submit" id="start" value="start"> <input type="submit" id="stop" value="stop">` `let start = document.querySelector('start'); let stop = document.querySelector('stop'); let timerId; start.addEventListener('click', function() { let timerId = setInterval(function() { let date = new Date; console.log(date.getMinutes() + ' ' + date.getSeconds()); }, 1000); }); stop.addEventListener('click', function() { clearInterval(); });`

After running the code, however, again it turned out that the stop button did not work. Fix the code author's mistake.

The code I gave in the theoretical part does not take into account the fact that several clicks can be made on the start button. To fix this problem, you can unbind the event from this button by pressing the start button, and bind it back by pressing the stop button. Fix the problem.

← →
↑
en ru