title: getElementById with variable
body: <p>I want to use a variable with getElementById, but it just returns:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'style' of null
  </code></pre>
  
  <p>My code looks about that</p>
  
  <pre><code>document.getElementsByClassName("right").onclick = function() {
      score++;
      score2++;
  
      document.getElementsByClassName("right").style.color = "green";
      document.getElementsByClassName("wrong").style.color = "red";
  
      setTimeout(function() {
          document.getElementById("question"+score2).style.display = "none";
          document.getElementById("question"+score).style.display = "inline";
      }, 1500);
  };
  </code></pre>
  
  <p>It´s a quiz and what it should do is, that, when a right answer (with the class right) is clicked it should add 1 to the score and one to score2 (score -1) and than after 1.5sec in which the right and wrong answers are highlighted using green and red the next answer should appear. For example after question 2 the score is 3 and the code should change the display (form css) from none (invisible) to inline (visible) and the answered question should disappear. For example after question 2 score2=2 and the code</p>
  
  <pre><code>document.getElementById("question"+score2).style.display="none";
  </code></pre>
  
  <p>should make the question 2, which is in a div with the id question2 like all the others, invisible.</p>
  
  <p>---EDIT---
  The entire code:</p>
  
  <pre><code>var score = 0
  var score2 =-1
  document.getElementById("go").onclick = function() {
  score++;
  score2++;
  console.log("Score:");
  console.log(score);
  console.log("Score2:");
  console.log(score2);
  document.getElementById("question"+score2).style.display="none";
  document.getElementById("question"+score).style.display="block";
  };
  
  document.getElementsByClassName("right").onclick = function(){
  score++;
  score2++;
  console.log("Score:");
  console.log(score);
  console.log("Score2:");
  console.log(score2);
  document.getElementsByClassName("right").style.color="green";
  document.getElementsByClassName("wrong").style.color="red";
  setTimeout(function(){
      document.getElementById("question"+score2).style.display="none";
      document.getElementById("question"+score).style.display="inline";
  },1500);
  };
  </code></pre>
  
  <p>---EDIT---
  The html code:
  NOTE: There are some question divs w/o content, these are for up coming questions. In my js I use the second id of every div (like question8 not questionEight).</p>
  
  <pre><code>&lt;div id="startScreen" id="question0"&gt;
      &lt;h1&gt;
          WELCOME TO THE 100 QUESTION GAME!
      &lt;/h1&gt;
  
      &lt;h2 id="go" style="color:pink"&gt;
          Lets GO!
      &lt;/h2&gt;
      &lt;p&gt;
          by strawberry studios
      &lt;/p&gt;
  
  &lt;/div&gt;
  &lt;div id="questionOne" id="question1" style="display:none;"&gt;
      &lt;h1&gt;
          Von wo aus kann man nur nach S&amp;uuml;den gehen?
      &lt;/h1&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;a id="questionOneAnswerOne" class="right"&gt;Nordpol&lt;/a&gt; &lt;br&gt; &lt;!--Richtig--&gt;
      &lt;a id="questionOneAnswerTwo"&gt;S&amp;uuml;dpol&lt;/a&gt; &lt;br&gt;
      &lt;a id="questionOneAnswerThree"&gt;&amp;Auml;quator&lt;/a&gt; &lt;br&gt;
      &lt;a id="questionOneAnswerFour"&gt;Bayern&lt;/a&gt; &lt;br&gt;
  &lt;/div&gt;
  
  &lt;div id="questionTwo" id="question2" style="display:none;"&gt;
      &lt;h1&gt;
          Was ist am teuersten?
      &lt;/h1&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;a id="questionTwoAnswerOne"&gt;Diamant&lt;/a&gt; &lt;br&gt;
      &lt;a id="quoestionTwonswerTwo"&gt;Platin&lt;/a&gt; &lt;br&gt;
      &lt;a id="questionTwoAnswerThree"&gt;Gold&lt;/a&gt; &lt;br&gt;
      &lt;a id="questionTwoAnswerFour" class="right"&gt;Osmium&lt;/a&gt; &lt;br&gt; &lt;!--Richtig--&gt;
  &lt;/div&gt;
  
  &lt;div id="questionThree" id="question3" style="display:none;"&gt;
      &lt;h1&gt;
          Wof&amp;uuml;r steht HTML?
      &lt;/h1&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;a id="questionThreeAnswerOne"&gt;Hyper Text Multiple Language&lt;/a&gt; &lt;br&gt;
      &lt;a id="questionThreeAnswerTwo"&gt;Hyper Text Markup Language&lt;/a&gt; &lt;br&gt; &lt;!--Richtig--&gt;
      &lt;a id="questionThreeAnswerThree" class="right"&gt;Hydrotecinmultiliquid&lt;/a&gt; &lt;br&gt;
      &lt;a id="questionThreeAnswerFour"&gt;Hype The Mother (a)lLong&lt;a/&gt; &lt;br&gt;
  &lt;/div&gt;
  
  &lt;div id="questionFour" id="question4" style="display:none;"&gt;
      &lt;h1&gt;
          Welche Farbe h&amp;auml;tte Cola ohne Farbstoffe?
      &lt;/h1&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;a id="questionFourAnswerOne"&gt;Gelb&lt;/a&gt; &lt;br&gt;
      &lt;a id="questionFouranswerTwo"&gt;Erdbraun&lt;/a&gt; &lt;br&gt;
      &lt;a id="questionFourAnswerThree" class="right"&gt;Grün&lt;/a&gt; &lt;br&gt; &lt;!--Richtig--&gt;
      &lt;a id="questionFourAnswerFour"&gt;Türkis&lt;a/&gt; &lt;br&gt;
  &lt;/div&gt;
  
  &lt;div id="questionFive" id="question5 "tyle="display:none;"&gt;
  
  &lt;/div&gt;
  
  &lt;div id="questionSix" id="question6" style="display:none;"&gt;
  
  &lt;/div&gt;
  
  &lt;div id="questionSeven" id="question7" style="display:none;"&gt;
  
  &lt;/div&gt;
  
  &lt;div id="questionEight" id="question8" style="display:none;"&gt;
  
  &lt;/div&gt;
  
  &lt;div id="questionNine" id="question9" style="display:none;"&gt;
  
  &lt;/div&gt;
  
  &lt;div id="questionTen" id="question10" style="display:none;"&gt;
  
  &lt;/div&gt;
  
  &lt;script type="text/javascript" src="javascript.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>