Javascript clearInterval not working properly

Question

Whenever I run my program, It seems to work fine. I use setInterval to make the time refresh, but when I click on a different item, the old one pops up again. It's a bit hard to explain, but basically clearInterval doesn't work. Here is my code:

            function days(idk) {
                clearInterval(days);
                var ver = idk;
                let date_1 = new Date('11/8/2022');
                let date_2 = new Date();
                let difference = date_1.getTime() - date_2.getTime();
                var dayHolder = document.getElementById('days');
                if (ver == 1) {
                    let TotalDays = Math.ceil(difference / 1000);
                    var text = ("There are " + TotalDays + " seconds until the Halo Infinite Winter Update.")
                    dayHolder.innerHTML = text;
                    setInterval(days, 1000, ver = 1);
                } else if (ver == 2) {
                    let TotalDays = Math.ceil(difference / (1000 * 60));
                    var text = ("There are " + TotalDays + " minutes until the Halo Infinite Winter Update.")
                    dayHolder.innerHTML = text;
                    setInterval(days, (1000 * 60), ver = 2);
                } else if (ver == 3) {
                    let TotalDays = Math.ceil(difference / (1000 * 3600));
                    var text = ("There are " + TotalDays + " hours until the Halo Infinite Winter Update.")
                    dayHolder.innerHTML = text;
                    setInterval(days, (1000 * 3600), ver = 3);
                } else if (ver == 4) {
                    let TotalDays = Math.ceil(difference / (1000 * 3600 * 24));
                    var text = ("There are " + TotalDays + " days until the Halo Infinite Winter Update.")
                    dayHolder.innerHTML = text;
                    setInterval(days, (1000 * 3600, 24), ver = 4);
                }
    
            }

        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-image: url("cheif.png");
            background-repeat: no-repeat;
            background-size: cover;
        }

        <h1>How many days until the Halo Infinite Winter Update?</h1>
        <p id="days">Click a button!</p>
        <button type="button" onclick="days(ver = 1)">Load seconds</button>
        <button type="button" onclick="days(ver = 2)">Load minutes</button>
        <button type="button" onclick="days(ver = 3)">Load hours</button>
        <button type="button" onclick="days(ver = 4)">Load days</button>
    

Answer 1

You need to save the ID of your interval outside the scope of your function and remove it by passing this ID to clearInterval function. This is how you should structure your code:

let intervalID; // should be defined outside the function

function myFunction() {
    clearInterval(intervalID);

    // This is where the ID is set
    intervalID = setInterval(myFunction, delay, args);

}