Making a stop_timer button to stop the timer when the button is pressed and display"the timer is over" when pressed. My code does that but as soon as i leave the buttton, the timer continues. How do i solve this issue

1

HTML File:

<html>
<head>

	<title>Java Webpage </title>

</head>
<body>
	<h1> Java script</h1>
	<h3> Click on the box below to show the name</h3>
	
	<button onclick="show_name('dhruva');">SHOW MY NAME</button>
    <p id="demo" style="color: red">YOUR NAME IS </p>
		<script type="text/javascript" src = "my-java-script.js"></script>
		<button onclick="start_timer();">Start timer</button>
		<button onclick="stop_timer();">Stop timer</button>
    <div id="counter">
</div>
<div id="status">
			<script type="text/javascript" src = "my-java-script.js"></script>

</div>
    
    </body>
</html>

JAVASCRIPT:
function show_name(my_name){
var predif = document.getElementById(“demo”);
predif.innerHTML = predif.innerHTML + my_name;
}
var counter = 0 ;

function start_timer(){
		setInterval(increment_counter, 1000);

}
function increment_counter(){
	counter_element = document.getElementById("counter") ; 
	counter_element.innerHTML = counter ; 
	counter= counter+1; 
}
function stop_timer(){
document.getElementById("counter").innerHTML = "Timer over"; 
}

HOW DO I FIX THIS ISSUE. .I WANT TO ACTUALLY END THE START TIMER FUNCTION AND INSTEAD PRINT “THE TIMER IS OVER” UNTIL I START THE TIMER ONCE AGAIN

2

The setInterval will keep on executing the function until you stop it using the clearInterval() function, but to do that you need to assign a variable to the setInterval() function. The following code should do the work :

var counter = 0 ;
var interval;
function start_timer(){
interval=setInterval(increment_counter, 1000);

}
function increment_counter(){
counter_element = document.getElementById(“counter”) ;
counter_element.innerHTML = counter ;
counter= counter+1;
}
function stop_timer(){
document.getElementById(“counter”).innerHTML = “Timer over”;
clearInterval(interval);
}

Hope this helps your query :slight_smile: .

3

@akhil , unfortunately, it completely doesn’t solve the issue. There are 2 problems:

  1. For eg, if the time i stopped the timer was 5 seconds, the next time i would start it would resume from there. It is fine if someone wants to use it as a pause and resume button. But, what if someone wants to use it as a resetr button?

  2. If we press on the start interval button for the second time when the timer is still on, a) it’s speed doubles and b) if i stop the interval, it just slows down and does not stop.

I hope you will assist me with both the issues

4

The solution to problem no. 1 is easy , you just need to reset the value of your counter variable to 0 in the function.
As for problem no. 2 you’ll have to make sure that only one instance of setInterval() is running, and to do that just clearInterval() before you call the setInterval() function.

I’ll paste the JS code below so that its easier to understand :

var counter = 0 ;
var interval;
function start_timer(){
clearInterval(interval); //This will prevent the speeding up issue
interval=setInterval(increment_counter, 1000);

}
function increment_counter(){
counter_element = document.getElementById(“counter”) ;
counter_element.innerHTML = counter ;
counter= counter+1;
}
function stop_timer(){
document.getElementById(“counter”).innerHTML = “Timer over”;
clearInterval(interval);
counter=0; //This will reset the value of the counter to zero everytime to call this function
}

Hope this helps :slight_smile: .

2 Likes
5

@akhil , that solves by problem but i did not understand how putting clearInterval(interval) solves the problem. I mean it works but can you explain its concept to me.

6

The reason we put that in front of the declaration of setInterval is to make sure that only one instance of setInterval is working. Multiple setInterval instances causes a lot of problem .Like what was happening to your code when the timer was sped up .So its there for safety measure just like how you’d make sure that switch is off before plugging in anything in the socket.

7

@akhil, thanks. that helps

8

@jindaldhruva :slight_smile: