javascript - how to add onclick event to start timer - Stack Overflow

admin管理员组

文章数量:1398831

New to coding. Created a timer that I would like to start when "gameStart" button is pushed, instead of on page load. Not sure where to insert my "onclick". Thank you

<div id= "startButtons">
        <button  id= "gameStart">Get Going!</button>

<script>

var timeleft = 15;

var downloadTimer = setInterval(function function1(){
  document.getElementById("countdown").innerHTML = timeleft + 
"&nbsp"+"seconds remaining";

  timeleft -= 1;
  if(timeleft <= 0){
    clearInterval(downloadTimer);
    document.getElementById("countdown").innerHTML = "Time is up!"
  }
}, 1000);

    console.log(countdown);

</script>

New to coding. Created a timer that I would like to start when "gameStart" button is pushed, instead of on page load. Not sure where to insert my "onclick". Thank you

<div id= "startButtons">
        <button  id= "gameStart">Get Going!</button>

<script>

var timeleft = 15;

var downloadTimer = setInterval(function function1(){
  document.getElementById("countdown").innerHTML = timeleft + 
"&nbsp"+"seconds remaining";

  timeleft -= 1;
  if(timeleft <= 0){
    clearInterval(downloadTimer);
    document.getElementById("countdown").innerHTML = "Time is up!"
  }
}, 1000);

    console.log(countdown);

</script>

• javascript
• onclick
• mouseevent

Share Improve this question Follow asked Feb 11, 2019 at 18:47 astroboyeeastroboyee 2311 gold badge11 silver badge55 bronze badges 2

• 1 Let me assure you that you are not the first person ever creating a timer in JavaScript. Please use your favorite search engine and you will find tons of examples. – PM 77-1 Commented Feb 11, 2019 at 18:52
• It would be good if you post the question after searching a few existing solutions. Btw wele to stackoverflow! – Narendra Kamath Commented Feb 11, 2019 at 19:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You just need to add an Event Listener click function to your div.

Heres some working code:

document.getElementById("gameStart").addEventListener("click", function(){
    var timeleft = 15;

    var downloadTimer = setInterval(function function1(){
    document.getElementById("countdown").innerHTML = timeleft + 
    "&nbsp"+"seconds remaining";

    timeleft -= 1;
    if(timeleft <= 0){
        clearInterval(downloadTimer);
        document.getElementById("countdown").innerHTML = "Time is up!"
    }
    }, 1000);

    console.log(countdown);
});

        <div id= "startButtons">
          <button  id= "gameStart">Get Going!</button>
        </div>
        <div id= "countdown"></div>

You need to put the onclick on the button, a simple modification to your code will help you in achieving what you wanted.

<p id="countdown"></p>
<div id= "startButtons">
    <button onclick="sample()" id= "gameStart">Get Going!</button>

<script>

var timeleft = 15;
function sample() {
var downloadTimer = setInterval(function 
   function1(){ 
document.getElementById("countdown").innerHTML = timeleft + "&nbsp"+"seconds remaining";

timeleft -= 1;
if(timeleft <= 0){
    clearInterval(downloadTimer);

document.getElementById("countdown").innerHTML = "Time is up!"
  }
}, 1000);

    console.log(countdown)
}

</script>

You can put the onclick event on the button.

<div id= "startButtons">
  <button  id= "gameStart" onclick="">Get Going!</button>
</div>

Then you have to modify your function to not start before the click.

var timeleft = 15;

// global variables for reference
var downloadTimer;

function startInterval() {  // everything inside this function that is called with click on button
  downloadTimer = setInterval(function function1(){
    document.getElementById("countdown").innerHTML = timeleft + "&nbsp"+"seconds remaining";

    timeleft -= 1;
    if(timeleft <= 0){
      clearInterval(downloadTimer);
      document.getElementById("countdown").innerHTML = "Time is up!"
    }
  }, 1000);
}

本文标签： javascripthow to add onclick event to start timerStack Overflow