I'm trying to create countdown timer. Everytime i reload the page, the timer start directly.. I want to add start button to let the time start after i press the button.
Below is my code:
var counter = 30;
var mode = "Workout";
var rounds = 1;
var interval = setInterval(function() {
counter--;
if (mode == "Workout" && counter >= 0) {
id = document.getElementById("count");
id.innerHTML = "ROUND " + rounds + " <br> " + counter;
} else {
id = document.getElementById("count");
id.innerHTML = "REST " + " <br> " + counter;
}
if (counter === 0) {
if (mode == "Workout") {
mode = "Rest";
} else {
mode = "Workout";
rounds++;
}
id.innerHTML = "FINISHED";
counter = 30;
if (rounds == 21) {
clearInterval(interval);
}
}
}, 1000);<div>
<h1 id="count"></h1>
</div>You can wrap your whole code in to a function:
const startTimer = () => {
var counter = 30;
var mode = "Workout";
var rounds = 1;
var interval = setInterval( function(){
counter--;
if(mode == "Workout" && counter >= 0 ){
id = document.getElementById("count");
id.innerHTML = "ROUND " + rounds + " <br> " + counter;
}
else{
id = document.getElementById("count");
id.innerHTML = "REST "+ " <br> " + counter;
}
if( counter === 0 ){
if(mode == "Workout"){
mode = "Rest";
}
else{
mode = "Workout";
rounds++;
}
id.innerHTML = "FINISHED";
counter = 30;
if (rounds == 21){
clearInterval(interval);
}
}
}, 1000);
}
and trigger it via event Event Listener
add button:
<button id="btn">Start Timer</button>
add listener:
document.querySelector('#btn').addEventListener('click', startTimer);
Just wrap your code in a function, and add that to the button as an event listener listening for click events:
document.getElementById('start').addEventListener('click', startCountdown);
let interval;
function startCountdown() {
let counter = 30,
mode = "Workout",
rounds = 1;
// if a countdown is already running, stop it
if (interval) clearInterval(interval);
interval = setInterval(function() {
counter--;
if (mode == "Workout" && counter >= 0) {
id = document.getElementById("count");
id.innerHTML = "ROUND " + rounds + " <br> " + counter;
} else {
id = document.getElementById("count");
id.innerHTML = "REST " + " <br> " + counter;
}
if (counter === 0) {
if (mode == "Workout") {
mode = "Rest";
} else {
mode = "Workout";
rounds++;
}
id.innerHTML = "FINISHED";
counter = 30;
if (rounds == 21) {
clearInterval(interval);
}
}
}, 1000);
}<div>
<h1 id="count"></h1>
</div>
<button type="button" id="start">Start Countdown</button>You can wrap your code with a start function which you call on a button click event:
var counter = 30;
var mode = "Workout";
var rounds = 1;
document.getElementById('startbutton').addEventListener('click', startTimer)
function startTimer(){
var interval = setInterval(function() {
counter--;
if (mode == "Workout" && counter >= 0) {
id = document.getElementById("count");
id.innerHTML = "ROUND " + rounds + " <br> " + counter;
} else {
id = document.getElementById("count");
id.innerHTML = "REST " + " <br> " + counter;
}
if (counter === 0) {
if (mode == "Workout") {
mode = "Rest";
} else {
mode = "Workout";
rounds++;
}
id.innerHTML = "FINISHED";
counter = 30;
if (rounds == 21) {
clearInterval(interval);
}
}
}, 1000);
}<div>
<h1 id="count"></h1>
<button id='startbutton'>Start</button>
</div>