countdown timer not stopping

Javascript coding ..

Moderators: egami, macek, gesf

Post Reply
piano0011
New php-forum User
New php-forum User
Posts: 9
Joined: Mon Mar 19, 2018 4:14 am

Thu Jul 19, 2018 2:33 am

Hey guys!

I have the following countdown timer and everything seems to be working. There are just a few problem with the code. First of all, when I keep clicking on start, it will countdown at a faster rate, is there a way to fix this? Someone mentioned to add clearInterval? I tried to add that that to my stop() but it doesn't work. I also have an input form, where it should be grabbing the timer result once the user has stopped the timer. At the moment, it is grabbing both the string <br></br as well, which is not what I want... Here is my code:

Code: Select all


<?php

$timer = 60;


?>





<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>


<script>
   var timer = <?php echo $timer ?>;    // 1 minute timer.... 
   var min = 0;
   var sec = 0;

   function startTimer() {
   	   min = parseInt(timer/60);
   	   sec = parseInt(timer%60);

   	   if(timer<1) {
   	   	   document.write("You have to start again!");
   	   }

   	   document.getElementById("time").innerHTML = "<b>Time Left:  </b>" + min.toString() + ":" + sec.toString();
   	   timer--;
   	   setTimeout(function() {
          startTimer();
   	   }, 1000);
   }



     function stop() {
     	clearInterval('time');
     	alert("Thank you for completing the test. You finished the test at: " +  min.toString() + ":" + sec.toString());
     	  
         var result = document.getElementById('time').innerHTML;
         document.getElementById('input').value = result;
    //   window.location.href = "update.php";
     }



</script>

<div class="timer">
<h1>Welcome to Timertrone.</h1>
<br></br>


   <span class="timer_display" id="time" ...></span>



<input type="test" id="input">
<h1 id="buttons"></h1>
<button type="submit" name="start" onclick="startTimer()">Start</button>
<button type="submit" name="stop" onclick="stop()">Stop</button>





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




P.S Does anyone have a better countdown timer that I can use?

Post Reply