How to end my countdown timer when a button is clicked?

Question

I'm trying to create a function that will end a countdown timer, or automatically make the minutes and seconds part of the countdown timer === 0; however, it seems that using clearInterval(time) doesn't seem to work! Could anyone point out how I might be able to achieve what I'm trying to do!

Note that I've made startingMinutes = 1 just for my ease.

Below is the countdown function and HTML:

// FUNCTION - countDown function that counts down from 8 minutes

const startingMinutes = 1;
let time = startingMinutes * 60;

function updateCountDown() {

    const minutes = Math.floor(time / 60);
    let seconds = time % 60;
        
        seconds = seconds < 1 ? '0' + seconds : seconds;
        document.getElementById("countdown").innerHTML = `${minutes}:${seconds}`;
        time--;
        time = time < 0 ? 0 : time; 
            if (minutes == 0 && seconds == 0) {
                document.getElementById('tableStyle').style.display = "block";
                document.getElementById('wordsIncluded').style.display = "block";
                document.getElementById('show_header_one').style.display = "block";
                recognition.abort(); //speech recognition stops when countdown timer ends
                isListening = false;
            }


//my attempt at clearing the countdowntimer!

        window.addEventListener('DOMContentLoaded', function() {
            document.getElementById("submit_button").addEventListener("click", function() {
                clearInterval(time);
            })});

HTML:

//where the countdown timer is displayed

<div id="circle"><p id="countdown">8:00</p></div>


//Click the below button and the countdown timer will end (minutes === 0 and seconds === 0)
<button id="submit_button" type="submit">Click to Submit</button>

    

Answer 1

To use clearInterval you need to pass it the value returned by setInterval

I have an example below using your code, where I pass the value from "setInterval" which I call "interval" to a function "stop" which calls "clearInterval" to stop the timer, and runs the code you were running.

let isListening = true;
const recognition = { abort: () => console.log('aborted') };

function updateCountDown(time) {
  const minutes = Math.floor(time / 60);
  const seconds = time % 60;
  const timer = document.getElementById("countdown");
  timer.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
}

function start(time) {
  const interval = setInterval(() => {
    if (--time) updateCountDown(time);
    else stop(interval);
  }, 1000);
  document.getElementById("submit_button")
    .addEventListener("click", () => stop(interval))
}

function stop(interval) {
  updateCountDown(0);  // This line sets time to 0
  clearInterval(interval);
  foo()
}

// I assume you want this to happen when the timer runs down or the button is clicked
function foo() {
  document.getElementById('tableStyle').style.display = "block";
  document.getElementById('wordsIncluded').style.display = "block";
  document.getElementById('show_header_one').style.display = "block";
  recognition.abort(); //speech recognition stops when countdown timer ends
  isListening = false;
}

start(8*60)

#tableStyle, #wordsIncluded, #show_header_one { display: none; }

<p id="tableStyle">Table Style</p>
<p id="wordsIncluded">Words Included</p>
<p id="show_header_one">Show Header One</p>

<div id="circle">
  <p id="countdown">8:00</p>
</div>
<button id="submit_button" type="submit">Click to Submit</button>