Why does my countdown timer jump 20 minutes after 2 seconds?

Question

I have a weird bug in my setInterval / timer() function code.

I have a countdown timer for 20 minutes (and 0 seconds), and it should count down every second, but it's counting down weirdly. (See CSVs below)

I tried surrounding parseInts for the minutes and seconds, but it just makes the Time Displayed 's outputs become NaN**

 var n = setInterval(timer, 1000); function timer() { var time = document.getElementById('timer').innerHTML; var minutes = time[1] + time[2]; var seconds = time[12] + time[13]; if (seconds == 0) { minutes--; seconds = 59; } else { seconds--; } document.getElementById('timer').innerHTML = (minutes + ' minutes ' + seconds + ' seconds'); } 

 <button id = 'timer'> 30 minutes 00 seconds</button> 

As you can see, the code jumps the time weirdly. (CSVs here*)

    Time Displayed            min sec
    30 minutes 00 seconds,     29,59,
    29 minutes 59 seconds,     9 ,8,
    9  minutes 8 seconds,        ,NaN,
       minutes NaN seconds,      ,NaN,
       minutes NaN seconds,      ,NaN,
       minutes NaN seconds,      ,NaN,
    etc

I suspect it's something to do with the if statement somehow deleting minutes[0] and seconds[0] with the decrements, but I can't figure out why.

Why does this happen? How do I fix it?

_{*: I got these from outputting [document.getElementById('timer').value, minutes, seconds] to a separate textarea when the else statement was done, just before I updated the timer value. I also separated the Time Displayed from the minutes and seconds for you.}

_{**: I mean after the 9 minutes 8 seconds there's NaN minutes NaN seconds. It doesn't become NaN immediately.}

Answer 1

Becaues you're overwriting the variables with every function call, put the variables outside the function :

 var n = setInterval(timer, 1000); var time = document.getElementById('timer').innerHTML; var minutes = time[1] + time[2]; var seconds = time[12] + time[13]; function timer() { if (seconds == 0) { minutes--; seconds = 59; } else { seconds--; } document.getElementById('timer').innerHTML = (minutes + ' minutes ' + seconds + ' seconds'); } 

 <button id='timer'> 30 minutes 00 seconds</button> 

Answer 2

The error is how you are taking the characters from the string time

For the string: "30 minutes 00 seconds"
time[1] = 0
time[2] = " "

It gives NaN when time[1] or time[2] happens to be the empty string.
In that case the operation -- over a string gives NaN .

I would rely on splitting the phrase into tokens, rather than getting single characters.
Try:

 var n = setInterval(timer, 1000); function timer() { var time = document.getElementById('timer').innerHTML.split(" "); //splits the string "30 minutes 00 seconds" in an array with 4 elements. var minutes = time[0]; var seconds = time[2]; if (seconds == 0) { minutes--; seconds = 59; } else { seconds--; } document.getElementById('timer').innerHTML = (minutes + ' minutes ' + seconds + ' seconds'); } 

 <button id='timer'>30 minutes 00 seconds</button>