title: Why does my countdown timer jump 20 minutes after 2 seconds?
body: <p>I have a weird bug in my setInterval / timer() function code.</p>
  
  <p>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)</p>
  
  <p>I tried surrounding parseInts for the minutes and seconds, but it just makes the <code>Time Displayed</code>'s outputs become NaN**</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id = 'timer'&gt;
  30 minutes 00 seconds&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, the code jumps the time weirdly. 
  (CSVs here*)</p>
  
  <pre><code>    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
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>Why does this happen? How do I fix it?</strong></p>
  
  <p><sub>*: 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 <code>Time Displayed</code> from the <code>minutes</code> and <code>seconds</code> for you.</sub></p>
  
  <p><sub>**: I mean after the <code>9 minutes 8 seconds</code> there's <code>NaN minutes NaN seconds.</code> It doesn't become NaN immediately.</sub></p>