Count down after pressing a button

Question

I am creating a game for children with a timer countdown that starts after a user clicks a button.

The code used will initiate the countdown without any problems, but I would like the countdown to start only after the button is pressed.

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

Thanks! Lauren

Answer 1

Use the click click action link to interact 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 a click button on the button to call this function. Do something like that.

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);
}

$("#startClock").click(function(){
    startTimer();
});

Fiddle

Answer 3

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

Answer 4

onLoad , onClick

$('#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);

 });

, JsFiddle

Answer 5

, , , onload.

, jQuery click() .

   $('#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 6

click , 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);
}

-

---

I also need to suggest that you use $(function(){});the ready function at home instead, window.onload = function(){};just because dom ready did not wait for dom to fully load in order to execute the script.