title: displays undefined after array is finished
body: <p>This is one of my first projects, I'm trying to have a countdown after the "start" button is presssed from 3,2,1,Stream! then display the times x, and z are tapped on the doc, but after "Stream!" it displays undefined. It feels like I've tried everything in my current knowledge, if you can help, Thanks!</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 sec = ["3", "2", "1", "Stream!"];
  var a = 0;
  var xcount = 0;
  var zcount = 0;
  document.getElementById("myBtn").addEventListener("click", updatetimer);
  document.addEventListener("keydown", keyPush);
  
  function updatetimer() {
      var time = setInterval(timer, 1000, false);
  }
  
  function keyPush(evt) {
      switch (evt.keyCode) {
          case 88:
              xcount = xcount + 1;
              document.getElementById("demo").innerHTML = xcount;
              break;
          case 90:
              zcount = zcount + 1;
              document.getElementById("demo2").innerHTML = zcount;
              break;
      }
  }
  
  function timer() {
      var write = (document.getElementById("demo").innerHTML = sec[a]);
      a += 1;
      if (write === sec[3]) {
          clearInterval(time);
          return;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
    &lt;input type="button" value="Start!" id="myBtn"/&gt;
    &lt;p id="demo"&gt; &lt;/p&gt;
    &lt;p1 id ="demo2"&gt; &lt;/p1&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>