Click here to Skip to main content
15,901,426 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I want to create 2 buttons-one is resume and the other is stop. With the help of set interval, I want to start and stop the clock. For the first time, the stop and resume buttons are working perfectly but when I again press the stop button it is not stopping the clock.
JavaScript
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>A script on this page starts this clock:</p>

<p id="demo"></p>

<button onclick="setInterval(myTimer, 1000)">Resume time</button>
<button onclick="clearInterval(myVar)">Stop time</button>


<script>
let myVar = setInterval(myTimer ,1000);
function myTimer() {
  const d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

</body>
</html>
What's the issue?

What I have tried:

The stop button is using the variable and the resume button is using its own function. I guess the problem is there. Is it possible if setinterval method can invoke the function with the help of variable? Basically i want to know how to restart the setinterval method after stopping it with clearinterval.
Posted
Updated 5-Jan-22 22:28pm
v2

1 solution

Your stop button references the myVar variable which is storing the reference of the timer which is running, and that variable is initialized when the page loads:
JavaScript
onclick="clearInterval(myVar)"
                       ^^^^^

let myVar = setInterval(myTimer ,1000);
    ^^^^^

The problem is that when you click the resume button, you're not updating the myVar variable with the reference to the new timer, so clicking the stop button just tries to cancel the previous timer.
JavaScript
onclick="myVar = setInterval(myTimer, 1000)"

Also, just a footnote, your resume button doesn't check whether the timer is already running so it would be possibly to click that button multiple times and have multiple timers running. Not sure if that's relevant but I thought I'd mention it!

Edit

The setInterval() function returns a number value representing the ID of the timer. You can use this logic to keep track of whether a timer is active. If the timer is cancelled you can then set the value of myVar to an invalid ID (for example, -1), and then when the resume button is clicked you can check whether the myVar value contains the invalid ID -1.
JavaScript
let myVar = setInterval(myTimer, 1000);

function stopTimer()
{
  if (myVar !== -1) {
    clearInterval(myVar);
    myVar = -1; 
  }
}

function startTimer()
{
  if (myVar === -1) {
    myVar = setInterval(myTimer, 1000);
  }
}
 
Share this answer
 
v2
Comments
Apoorv 2021 6-Jan-22 5:01am    
Now it is working thank you so much for the help...just a quick doubt..is there any way to update function parameters after a certain event is being initiated?
Chris Copeland 6-Jan-22 5:06am    
I'm not 100% sure what you mean. The parameters passed into a function can be constant values (like 1, 2, "Hello") or from variables. You can update variables by simply assigning them elsewhere.

You can add more variables for global state tracking by declaring them in the <script> tags. You can create functions which can be called, ie:

function doSomething() {
..
}

onclick="doSomething()"

If this isn't what you meant then please do provide more info and I'll help where I can :)
Apoorv 2021 6-Jan-22 5:16am    
I kinda got it...could you just give an idea of the solution regarding the footnote you have mentioned?
Chris Copeland 6-Jan-22 5:21am    
I've updated my solution to include more information. It's quite common in programming to keep track of the states of things in variables, and in this case we can check the value of the myVar variable to see whether we need to start/stop the timer.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900