problem with clearInterval() in javascript

Question

I made a simple little timer with a start, reset, plus a nonfunctional stop button. All the documentation that I have read on it makes it seem very simple so I have no idea what's going wrong.

the stop.onclick function is getting read, but it only works for a second before it gets overwritten by the setInterval function

ps- I intend to improve the accuracy so please no hints on how best to do that

const start = document.getElementById("button1")
const stop = document.getElementById("stop")
const reset = document.getElementById("reset")

var clock = start.onclick = function(){
    let seconds = 1
    let minutes = 0
    setInterval(function() {

        if (minutes == 0){
            if (seconds < 10)
                timer.innerHTML = '0:0' + seconds++;
            else
                timer.innerHTML = '0:' + seconds++;
            if (seconds == 60){
                minutes++
                seconds = 0             
            }
        }

        else {          
            if (seconds < 10)
                timer.innerHTML = minutes + ':0' + seconds++;
            else
                timer.innerHTML = minutes + ':' + seconds++;
            if (seconds == 60){
                minutes++
                seconds = 0             
            }
        }


    }, 1000);
    reset.onclick = function(){
        seconds = 0
    }
    stop.onclick = function(){      
        let display = seconds
        timer.innerHTML = display
        clearInterval(clock)
        // alert("You stopped the clock!")
    }           
}

```

Answer 1

The problem is that that is not how setInterval and clearInterval work. Specifically, you don't pass clearInterval the function that you have running at some interval to clear the interval. Instead, setInterval returns a reference to the process; you can then pass that reference to clearInterval to clear it. For instance:

const myIntervalProcess = setInterval(() => console.log('hi'), 1000);

setTimeout(() => clearInterval(myIntervalProcess), 5000);

What we see above is that we set a function that logs "hi" to the console every second. We save the reference returned from setInterval to a variable called myIntervalProcess. Then we set a timeout to pass myIntervalProcess to clearInterval after five seconds. If you run this you can see that "hi" will be logged to console exactly five times, after which point it will cease.

If we apply this fix to your code we get:

const start = document.getElementById("button1")
const stop = document.getElementById("stop")
const reset = document.getElementById("reset")

var clock = start.onclick = function(){
    let seconds = 1
    let minutes = 0
    const clockProcess = setInterval(function() {

        if (minutes == 0){
            if (seconds < 10)
                timer.innerHTML = '0:0' + seconds++;
            else
                timer.innerHTML = '0:' + seconds++;
            if (seconds == 60){
                minutes++
                seconds = 0             
            }
        }

        else {          
            if (seconds < 10)
                timer.innerHTML = minutes + ':0' + seconds++;
            else
                timer.innerHTML = minutes + ':' + seconds++;
            if (seconds == 60){
                minutes++
                seconds = 0             
            }
        }


    }, 1000);
    reset.onclick = function(){
        seconds = 0
    }
    stop.onclick = function(){      
        let display = seconds
        timer.innerHTML = display
        clearInterval(clockProcess)
        // alert("You stopped the clock!")
    }           
}

Also, for what it's worth, you may wish to use a linter on your code-- I see some missing semicolons and other errors/inconsistencies it would help you catch and resolve. Good luck!