title: TypeError: document.getElementById() is null
body: <p>I'm trying to change the source of an image when one of my function is called "switchTurn" but, it's not working and firebug keeps saying it's because of this : </p>
  
  <pre><code>TypeError: document.getElementById("turns") is null
  
  document.getElementById('turns').src = x;
  </code></pre>
  
  <p>I don't understand, I'm able to change the source of all my images except the one with the "turns" ID. Could anyone help me out on this?</p>
  
  <p>HTML </p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  
  &lt;html&gt;
  &lt;meta http-equiv="Content-type" content="text/html;charset=UTF-8"&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="default.css" /&gt;
      &lt;script language="Javascript" src="default.js" &gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="DisplayPlayed()" onmousedown="return false"&gt;
      &lt;div id="wrapper" onmousedown="return false"&gt;
          &lt;div id="Bcards" onmousedown="return false"&gt;
              &lt;img src="turnedcard.png" id="Bcard01"/&gt;
              &lt;img src="turnedcard.png" id="Bcard02"/&gt;
              &lt;img src="turnedcard.png" id="Bcard03"/&gt;
              &lt;img src="turnedcard.png" id="Bcard04"/&gt;
              &lt;img src="invisiblecard.png" id="Bcard05"/&gt;
              &lt;img src="invisiblecard.png" id="Bcard06"/&gt;
              &lt;img src="invisiblecard.png" id="Bcard07"/&gt;
          &lt;/div&gt;
          &lt;div id="Pcards"&gt;
              &lt;img src="turnedcard.png" id="Pcard01"/&gt;
              &lt;img src="turnedcard.png" id="Pcard02"/&gt;
              &lt;img src="turnedcard.png" id="Pcard03"/&gt;
              &lt;img src="turnedcard.png" id="Pcard04"/&gt;
              &lt;img src="invisiblecard.png" id="Pcard05"/&gt;
              &lt;img src="invisiblecard.png" id="Pcard06"/&gt;
              &lt;img src="invisiblecard.png" id="Pcard07"/&gt;
          &lt;/div&gt;
              &lt;img src="turnedcard.png" id="PlayedCards" onmousedown="return false"/&gt;
  
              &lt;img src="Down.png" id="turns" onmousedown="return false"/&gt;
              &lt;img src="Down.png" id="turns" onmousedown="return false"/&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>var Deck = [];
  generateDeck();
  var Numbers = [], Drew = 0, turn = false;
  generateNumber();
  
  function generateNumber(){
      do{
          Numbers[Drew] = Math.floor(Math.random() * 55);
      }while(Deck[Numbers[Drew]] === "|");
      Drew++;
      Numbers[Drew - 1] = 44;
      if(Numbers[Drew - 1] === 44 || Numbers[Drew - 1] === 45 || Numbers[Drew - 1] === 46 || Numbers[Drew - 1] === 47){
          switchTurn();
      }
  }
  
  function generateDeck(){
      for(i = 0; i &lt; 56; i++){
          Deck[i] = i.toString();
      }
  }
  
  function discard(){
      Deck[Numbers[Drew]] = "|";
  }
  
  function switchTurn(){
      if(turn === true){
          arrowTurn("Up.png");
          turn = false;
      }else if(turn === false){
          arrowTurn("Down.png");
          turn = true;
      }
  }
  
  function arrowTurn(x){
      document.getElementById('turns').src = x;
  }
  
  function DisplayPlayed(){
      document.getElementById("PlayedCards").src = Deck[Numbers[Drew - 1]] + ".png";
      discard();
  }
  </code></pre>