const START_BTN = document.getElementById("start")
const TEXT = document.getElementById("top")
let TIMER = document.getElementById("time")
START_BTN.addEventListener("click", start)
TIMER.innerText = "30"
let TIMER_FUNC = setInterval(countdown, 1000);
function start(){
START_BTN.style.display = "none"
TEXT.style.display = "block"
countdown()
}
function countdown(){
TIMER.innerText--
}
<div class="game">
<button id="start">Start</button>
<div id="top">
<div class="color1">RED</div>
<div class="color2">YELLOW</div>
</div>
<div class="bottom">
<div class="row1">
<button class="blue"></button>
<button class="yellow"></button>
</div>
<div class="row2">
<button class="green"></button>
<button class="red"></button>
</div>
</div>
</div>
<div class="span">
<span id="score"></span>
<span id="time"></span>
</div>
Basically, I want the countdown which is the timer to only start when the start function is active. The start function is a button and when clicked I want the timer to go down. Currently its going down on window load which makes sense but its not what I want.