Starting counter on button click?

Question

I have this countdown timer, that counts down for 10 minutes on a button click. Well, that is what it's supposed to do. It actually starts as soon as the page opens. What I want it to do is start counting when the button is clicked!

<!DOCTYPE html>
<html>
<head> 

<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/ico" href="favicon.ico">

 <style> 

 * 
 {
    background-color: #422833; 
 }

 * 
 {
    font-family: 'Ubuntu', sans-serif;
    font-family: Helvetica, sans-serif; 
 }


 p, h1 
 {
    color: #E5E6D8;   
 }

  p, h2 
 {
    color: #6F8A79;   
 }

 textarea 
 {
    color: #422833;    
    font-family: "Courier New", Courier, monospace; 
    font-size:18px; 
    background-color: #E5E6D8;  
    border-radius: 20px; 
    padding-left: 30px; 
    padding-right: 30px; 
    outline:none; 

 }


 #title 
 { 
   text-align: center; 
 }

 #text 
 { 
  display: block; 
   margin-left: auto; 
   margin-right: auto; 
   outline: none; 

 }

  button 
  {
      border-radius: 10px;
    width: 120px; 
    height: 45px;  
    border: none; 

   font-weight:bold;
   margin-left: auto; 
   margin-right: auto; 
   display: block;
   outline: none; 
   background-color:#6F8A79;
   box-shadow:#003; 
  }

  #word, h2
  { 

   text-align:center; 
   color: #E4D5A3;
  }

  .finish 
  {
      color: #C86368;
  }

  #finish, h1
  { 
  text-align:center; 

  }    
 </style>

<title>WRITER</title>

</head>

<body>

<script>        
    var mins = 10;  //Set the number of minutes you need
    var secs = mins * 60;
    var currentSeconds = 0;
    var currentMinutes = 0;
    setTimeout('Decrement()',1000);

    function Decrement() {
        currentMinutes = Math.floor(secs / 60);
        currentSeconds = secs % 60;
        if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
        secs--;
        document.getElementById("timerText").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into.
        if(secs !== -1) setTimeout('Decrement()',1000);
    } 

</script>

<h1 id="title"> 
  START THE TIMER
</h1>

<button onclick="Decrement()">GO!</button> 

<h2 id="timerText">######</h2>

<br/>

<textarea rows="15" cols="60" id="text">

</textarea> 

<h2 id="finish" class="finish">Copyright BibBoy &#174  2014 #ImYourMum</h2>

</body>
</html>

remove your single quotes around setTimeout('Decrement()',1000); so it's setTimeout(Decrement(),1000); — GCallie, Jul 24 '14 at 12:35

score 1 · Answer 1 · edited Jul 24 '14 at 12:42

Your single quotation is the problem, here is a working copy of you code in fiddle.

<body>
    <script>
        var mins = 10; //Set the number of minutes you need
        var secs = mins * 60;
        var currentSeconds = 0;
        var currentMinutes = 0;
        setTimeout(Decrement(), 1000);

        function Decrement() {
            currentMinutes = Math.floor(secs / 60);
            currentSeconds = secs % 60;
            if (currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
            secs--;
            document.getElementById("timerText").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into.
            if (secs !== -1) setTimeout('Decrement()', 1000);
        }
    </script>

<h1 id="title"> 
  START THE TIMER
</h1>

    <button onclick="Decrement()">GO!</button>

<h2 id="timerText">######</h2>

    <br/>
    <textarea rows="15" cols="60" id="text"></textarea>

<h2 id="finish" class="finish">Copyright BibBoy &#174  2014 #ImYourMum</h2>

</body>

score 1 · Answer 2 · edited May 23 '17 at 10:25

You should remove the automatic start:

var currentMinutes = 0;
setTimeout('Decrement()',1000); <-- remove this line which starts it

Moreover, if you are using:

setTimeout('Decrement()',1000);

It should be written as:

setTimeout(Decrement, 1000);

But, all in all, you should consider using setInterval if you wan't function continuously to execute after a one second. Therefore, you can rewrite your function to be like this (see removing of setTimeout):

function Decrement() {
    currentMinutes = Math.floor(secs / 60);
    currentSeconds = secs % 60;
    if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
    secs--;
    document.getElementById("timerText").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into.
}

And start the timer using following code:

<button onclick="setInterval(Decrement, 1000)">GO!</button>

Here is js fiddle example of a working code.

For further reading I recommend checking:

setTimeout or setInterval
calling functions with setTimeout (top voted answer)

Cheers.

score 0 · Accepted Answer · answered Jul 24 '14 at 12:32

you are calling it in the wrong time try this :

<!DOCTYPE html>
<html>
<head> 

<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/ico" href="favicon.ico">

 <style> 

 * 
 {
    background-color: #422833; 
 }

 * 
 {
    font-family: 'Ubuntu', sans-serif;
    font-family: Helvetica, sans-serif; 
 }


 p, h1 
 {
    color: #E5E6D8;   
 }

  p, h2 
 {
    color: #6F8A79;   
 }

 textarea 
 {
    color: #422833;    
    font-family: "Courier New", Courier, monospace; 
    font-size:18px; 
    background-color: #E5E6D8;  
    border-radius: 20px; 
    padding-left: 30px; 
    padding-right: 30px; 
    outline:none; 

 }


 #title 
 { 
   text-align: center; 
 }

 #text 
 { 
  display: block; 
   margin-left: auto; 
   margin-right: auto; 
   outline: none; 

 }

  button 
  {
      border-radius: 10px;
    width: 120px; 
    height: 45px;  
    border: none; 

   font-weight:bold;
   margin-left: auto; 
   margin-right: auto; 
   display: block;
   outline: none; 
   background-color:#6F8A79;
   box-shadow:#003; 
  }

  #word, h2
  { 

   text-align:center; 
   color: #E4D5A3;
  }

  .finish 
  {
      color: #C86368;
  }

  #finish, h1
  { 
  text-align:center; 

  }    
 </style>

<title>WRITER</title>

</head>

<body>

<script>        
    var mins = 10;  //Set the number of minutes you need
    var secs = mins * 60;
    var currentSeconds = 0;
    var currentMinutes = 0;


    function Decrement() {
        currentMinutes = Math.floor(secs / 60);
        currentSeconds = secs % 60;
        if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
        secs--;
        document.getElementById("timerText").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into.
        if(secs !== -1) setTimeout('Decrement()',1000);
    } 

</script>

<h1 id="title"> 
  START THE TIMER
</h1>

<button onclick=" setTimeout('Decrement()',1000);">GO!</button> 

<h2 id="timerText">######</h2>

<br/>

<textarea rows="15" cols="60" id="text">

</textarea> 

<h2 id="finish" class="finish">Copyright BibBoy &#174  2014 #ImYourMum</h2>

</body>
</html>

Starting counter on button click?

3 Answers3