javascript - Can't find any div using document.getElementById -

i have weird problem code, i'm changing background color of divs using javascript, "document.getelementbyid" not finding div , returns null.

javascript:

function colorfill(id) {    console.log(id); // shows correct string (r1h1)    var divid = document.getelementbyid(id);    // if replace id "r1h1", directly name of div, shows null    console.log(divid); // shows null } 

the "id" string coming php function, works, because when try alert(id), shows correctly (r1h1), when try find div using "id", returns null. also, i've tried find other divs , same.

here's div:

html:

<?php     include 'models/ms_model.php';     if (isset( $_session['gamestate'] ) && !empty( $_session['gamestate'] ))     {          fillgametable();     } ?>  <div id="row1" class="row rowactive">     <div id="r1h1" class="hole" style="float:left"></div> </div> 

i'm calling javascript function here:

php:

function fillgametable() {     echo '<script src="views/js/ms.js"></script>';     foreach($_session['gamestate'] $id)     {        echo'<script>colorfill("'.(string)$id.'");</script>';     } } 

the weirdest have function finding same div , works, wrong function ...

you outputting colorfill() function before divs in document. either have switch order, make sure elements in place in document before call colorfill() js function, this:

<div id="row1" class="row rowactive">     <div id="r1h1" class="hole" style="float:left"></div> </div> <?php     include 'models/ms_model.php';     if (isset( $_session['gamestate'] ) && !empty( $_session['gamestate'] )){ fillgametable(); } ?> 

another option refactor code fillgametable() php function returns javascript executed in document ready event.