How to add start button using javascript

Question

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>

Answer 1

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

Answer 2

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>