title: Can't find any div using document.getElementById
body: <p>I have a weird problem with my code, I'm changing the background color of some divs using Javascript, but "document.getElementById" is not finding the div and returns NULL.</p>
  
  <p>Javascript:</p>
  
  <pre><code>function colorFill(id)
  {
     console.log(id); // Shows the correct string (r1h1)
     var divID = document.getElementById(id);
     // Even if I replace the id by "r1h1", directly the name of the div, it shows NULL
     console.log(divID); // Shows NULL
  }
  </code></pre>
  
  <p>The "id" is a string coming from a php function, that works, because when I try do <code>alert(id)</code>, it shows up correctly (r1h1), but when I try to find the div using that "id", it returns a NULL. Also, I've tried to find other divs and it does the same.</p>
  
  <p>Here's the div:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;?php
      include 'models/ms_model.php';
      if (isset( $_SESSION['gameState'] ) &amp;&amp; !empty( $_SESSION['gameState'] ))
      { 
          fillGameTable();
      }
  ?&gt;
  
  &lt;div id="row1" class="Row rowActive"&gt;
      &lt;div id="r1h1" class="hole" style="float:left"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm calling the Javascript function here:</p>
  
  <p>PHP:</p>
  
  <pre><code>function fillGameTable()
  {
      echo '&lt;script src="views/js/ms.js"&gt;&lt;/script&gt;';
      foreach($_SESSION['gameState'] as $ID)
      {
         echo'&lt;script&gt;colorFill("'.(string)$ID.'");&lt;/script&gt;';
      }
  }
  </code></pre>
  
  <p>The weirdest this is that I have another function finding that same div and it works, something is wrong with this function ...</p>