使用document.getElementById找不到任何div

Question

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.

Javascript:

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
}

The "id" is a string coming from a php function, that works, because when I try do alert(id) , 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.

Here's the 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 the Javascript function here:

PHP:

function fillGameTable()
{
    echo '<script src="views/js/ms.js"></script>';
    foreach($_SESSION['gameState'] as $ID)
    {
       echo'<script>colorFill("'.(string)$ID.'");</script>';
    }
}

The weirdest this is that I have another function finding that same div and it works, something is wrong with this function ...

Answer 1

You are outputting the colorFill() function before the divs in the document. You either have to switch that order, to make sure that the elements are all in place in the document before you call the colorFill() JS function, like 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 would be to refactor your code so that the fillGameTable() PHP function returns a javascript which is executed in the document ready event.

Answer 2

If you are calling the JavaScript function from PHP make sure you're quoting the argument for the function properly:

function colorFill(id)
{
   var divID = document.getElementById(id);
   console.log(divID);
}

colorFill(r1h1); // not a string, returns null
colorFill('r1h1'); // string, returns object

It is likely you have something like this in PHP:

echo "colorFill(" . $variable . ")";

What you need is this (note the inclusion of the quotes surrounding the argument):

    echo "colorFill('" . $variable . "')";