title: Trying to create a simple Multiple Choice game
body: <p>My function that lists the question and choices won't work. I keep getting the error code <code>document.getElementById(...)</code> is null or not an object. The syntax appears to be correct. </p>
  
  <p>I want the questions and choices to appear in the same divs. I do not want to list all my questions at once. When the user completes a question, they then move on to the next question which will appear in exactly the same divs as the first question until all the questions have been seen. </p>
  
  <pre><code>&lt;script&gt;
  
  var questions = new Array();
  questions[0] = 'Is there a difference between a jungle and a rain forest?'
  questions[1] = 'What is the world\'s most common religion?',
  questions[2] = 'What is the second largest country (in size) in the world?';
  
  var choices = new Array();
  choices[0] = ['No difference', 'Some difference', 'Completely different'],
  choices[1] = ['Christianity', 'Buddhism', 'Hinduism', 'Islam'],
  choices[2] = ['USA', 'China', 'Canada', 'Russia'];
  
  var answers = new Array();
  answers[0] = ['Some difference'],
  answers[1] = ['Christianity'],
  answers[2] = ['Canada'];
  
  var score = 0;
  i= 0;
  
  var listQuestion = function(){  
      if( i &lt; questions.length ){
          document.getElementById("myDiv1").innerHTML = '&lt;p&gt;'+questions[i]+'&lt;/p&gt;';
          for (k=0; k&lt;choices[i].length; k++){
              document.getElementById("myDiv2").innerHTML ='&lt;p&gt;&lt;input type = "radio" name = "questionchoice"&gt;'+choices[i][k]+'&lt;/p&gt;';
          }
          document.getElementById("myDiv3").innerHTML = '&lt;p&gt;&lt;button onClick = "getRadioValue()"&gt;Check&lt;/button&gt;&lt;/p&gt; &lt;br&gt;';
      };
  };
  
  var getRadioValue = function(){
      for ( var h = 0; h &lt; document.getElementsByName('questionchoice').length; h++ ){
          var value = '';
          if (document.getElementsByName('questionchoice')[h].checked==true){
              value = document.getElementsByName('questionchoice')[h].value;
              score+=1
          }
      }
      if (value== answers[i]){
          document.getElementById("myDiv4").innerHTML ="That is correct. &lt;/br&gt;&lt;button input type = 'submit' onClick = 'loadContent()'&gt; Next Question&lt;/button&gt;";   
      }
      else {
          document.getElementById("myDiv4").innerHTML ="That is incorrect. &lt;/br&gt;&lt;button input type = 'submit' onClick = 'loadContent()'&gt; Next Question&lt;/button&gt;"; 
      }
      i++;
  };
  
  var whatIsScore = function(){
      return score; 
  }
  
  window.onload = listQuestion();
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="myDiv1"&gt;&lt;/div&gt; 
      &lt;div id="myDiv2"&gt;&lt;/div&gt;
      &lt;div id="myDiv3"&gt;&lt;/div&gt;
      &lt;div id="myDiv4"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>