javascript global-variables dom-events javascript-objects countdowntimer

How to make stop button in Javascript to stop everything

I intended to make a Countdown Time, but I'm getting a problem. I tried a lot but I'm getting nothing. Please help me to get out of this situation.

I want to make a stop button that resets every value of variable and also stops sound when I click on the stop button.

This is my code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <!-- <script src="./script.js"></script> -->
    <title>Timer</title>
</head>

<body>
    <input type="number" id="time-number" placeholder="Enter Seconds" />
    <h3>Time Left <span id="time-left"></span></h3>
    <button id="start-button">Start</button>
    <button id="stop-button">Stop</button>


    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const timeLeftDisplay = document.querySelector("#time-left");
            const startButton = document.querySelector("#start-button");
            const stopButton = document.querySelector("#stop-button");
            var myAudio = new Audio("./sounds.mp3");
            function countDown() {
                var timeleft = document.getElementById("time-number").value;
                console.log(timeleft);
                setInterval(function () {
                    if (timeleft <= 0) {
                        clearInterval((timeleft = 0));

                        myAudio.play();
                    }

                    timeLeftDisplay.innerHTML = timeleft;
                    timeleft -= 1;
                }, 1000);
            }

            startButton.addEventListener("click", countDown);
            stopButton.addEventListener("click", () => {
                myAudio.pause();

            });
        });

    </script>
</body>

</html>

Solution

you are not using correctly the clearInterval function, it spects the id of an interval to clear. keeping a variable on top of the function will help you to track the intervals.

added some comments to improve the code

document.addEventListener("DOMContentLoaded", () => {
  let intervalId = null;
  const timeLeftDisplay = document.querySelector("#time-left");
  const startButton = document.querySelector("#start-button");
  const stopButton = document.querySelector("#stop-button");
  const myAudio = new Audio("./sounds.mp3");

  function countDown() {
    // clear an old interval just in case the user clicks several times the start button
    if (intervalId) {
      clearInterval(intervalId);
      intervalId = null;
    }

    var timeleft = document.getElementById("time-number").value;
    // this is to show inmediatly the counter and start counting
    timeLeftDisplay.innerHTML = timeleft;
    timeleft -= 1;

    intervalId = setInterval(function() {
      if (timeleft <= 0) {
        // here we use the interval Id to clear the interval.
        clearInterval(intervalId);
        intervalId = null;
        myAudio.play();
      }

      timeLeftDisplay.innerHTML = timeleft;
      timeleft -= 1;
    }, 1000);
  }

  startButton.addEventListener("click", countDown);
  stopButton.addEventListener("click", () => {
    document.getElementById("time-number").value = ""
    timeLeftDisplay.innerHTML = ""
    myAudio.pause();
    if (intervalId) {
      clearInterval(intervalId);
      intervalId = null;
    }

  });
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <!-- <script src="./script.js"></script> -->
  <title>Timer</title>
</head>

<body>
  <input type="number" id="time-number" placeholder="Enter Seconds" />
  <h3>Time Left <span id="time-left"></span></h3>
  <button id="start-button">Start</button>
  <button id="stop-button">Stop</button>
</body>

</html>