title: Cannot read property 'add' of undefined error when updating variables which control html
body: <p>I use numbers as element ids, represented in js by i, and once the start button is pressed, it should hide the title screen, update i, and then removes the hide class (which hides an element) from the new i element (question 1) and the menu bar element. Question 1 and the menu bar should be left onscreen. However, the menu bar loads, but the question doesn't, and the error pops up.</p>
  
  <blockquote>
    <p>Cannot read property 'add' of undefined</p>
  </blockquote>
  
  <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>// variables
  var i = 0;
  var id = document.getElementById(i.toString());
  var next = document.getElementById("next");
  
  // hiding menu and other screens
  menuBar.classList.add('hide');
  next.classList.add('hide');
  
  document.getElementById("1").setAttribute("class", "hide");
  document.getElementById("2").setAttribute("class", "hide");
  document.getElementById("3").setAttribute("class", "hide");
  document.getElementById("4").setAttribute("class", "hide");
  document.getElementById("5").setAttribute("class", "hide");
  
  // show the next screen when the next button is pressed
  function nextScreen() {
    id.classList.add('hide');
    if (i == 0) {
      menuBar.classList.remove('hide');
    }
    i ++;
    
    next.classlist.add('hide');
    id.classList.remove('hide');
  }
  
  start.onclick = nextScreen;
  next.onclick = nextScreen;</code></pre>
  </div>
  </div>
  </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-html lang-html prettyprint-override"><code>    &lt;div class="container"&gt;
        &lt;!-- title screen --&gt;
        &lt;div id='0' class='title'&gt;
          &lt;h1&gt;
            Welcome to&lt;br&gt;the&lt;br&gt;&lt;strong&gt;IMPOSSIBLE QUIZ&lt;/strong&gt;
          &lt;/h1&gt;
          &lt;button id='start' class='green button'&gt;
            START
          &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;!-- question 1 --&gt;
        &lt;div id='1' class='question'&gt;
          &lt;span class='questionIndicator'&gt;
            Question 1
          &lt;/span&gt;
          &lt;br&gt;
          &lt;h2&gt;
            What is after
          &lt;/h2&gt;
          &lt;button id='secretAnswer' class='secret'&gt;
            ...?
          &lt;/button&gt;
          &lt;button id='q1WrongAnswer' class='answer button'&gt;
            this?
          &lt;/button&gt;
          &lt;button id='q1WrongAnswer' class='answer button'&gt;
            the answer
          &lt;/button&gt;
          &lt;button id='q1WrongAnswer' class='answer button'&gt;
            no idea
          &lt;/button&gt;
        &lt;/div&gt;
  
        &lt;!-- menu bar below questions --&gt;
        &lt;div id="menuBar" class="menuBar"&gt;
          &lt;button id='mainMenu' class='small red button'&gt;
            MAIN MENU
          &lt;/button&gt;
          &lt;button id='next' class='small next button'&gt;
            NEXT QUESTION
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>