Make countdown start after button is clicked

Question

I'm creating a kid's game with a timer countdown that starts after the user clicks a button.

The code I'm using initiates the countdown without a problem, but I'd like the countdown to start only after the button is clicked.

Here is my code:

window.onload = function(){
(function(){
  var counter = 5;
  setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
    if (counter === 0) {
        alert('sorry, out of time');
        clearInterval(counter);
    }
  }, 1000);
})();
}

JSFiddle

Thank you! Lauren

Answer 1

Use click event of action link with id= "startClock"

$("#startClock").click( function(){
   var counter = 5;
   setInterval(function() {
     counter--;
      if (counter >= 0) {
         span = document.getElementById("count");
         span.innerHTML = counter;
      }
      if (counter === 0) {
         alert('sorry, out of time');
         clearInterval(counter);
       }
     }, 1000);
});

Answer 2

Create a function and add click lister to button to call that function. Do somthing like this.

function startTimer(){
  var counter = 5;
  setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
    if (counter === 0) {
        alert('sorry, out of time');
        clearInterval(counter);
    }
  }, 1000);
}
function start()
{
    document.getElementById("count").style="color:green;";
    startTimer();
};

button
{
font-size:40px;
background-color:black;
color:white;
}
#count
{
   margin-left:20px;
   font-size:30px;
   color:black;
}

<span id="count">5</span> seconds
<br>
<button onclick="start()">
START
</button>

Answer 3

Use on method $(selector).on('click',callback);

Answer 4

You are expecting the function get work when you click and in your code you are using onload event.

So use click() event of jQuery for your requirement.

   $('#startClock').click(function(){
     var counter = 5;
     setInterval(function() {
      counter--;
      if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
   if (counter === 0) {
     alert('sorry, out of time');
     clearInterval(counter);
   }
  }, 1000);

 });

Answer 5

I just want to suggest you to put it in click handler of your selector instead of doing that on window load:

jQuery(function($){
   $('#startClock').on('click', doCount);
});

function doCount(){
   var counter = 5;
   setInterval(function() {
      counter--;
      if (counter >= 0) {
         span = document.getElementById("count");
         span.innerHTML = counter;
      }
      if (counter === 0) {
        alert('sorry, out of time');
        clearInterval(counter);
      }
   }, 1000);
}

Demo @ Fiddle

---

Also i need to suggest you that to use $(function(){}); dom ready function instead of window.onload = function(){}; just because dom ready does not wait for dom to get fully loaded to execute the script.

Answer 6

You are attaching your function in onLoad of the page, instead attach onClick

#count
{
font-size:30px;
color:green;
font-weight:bolder;
text-shadow:1px 1px 1px blue;
}
#text
{
font-size:30px;
color:blue;
font-weight:bolder;

}
button
{
font-size:25px;
background:black;
color:white;
border-radius:20px;
}
button:hover
{
transition:0.3s linear;
font-size:29px;
background:purple;
color:aliceblue;
border-radius:15px;
}

<span id="count">5</span> <span id="text">seconds</span>

<button onclick="start()">Start Clock</button>


<script>
function start(){
  var counter = 5;
  setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
    if (counter === 0) {
        alert('sorry, out of time');
        clearInterval(counter);
    }
  }, 1000);
    
};
</script>