使用document.getElementById找不到任何div

Question

我的代码有一个奇怪的问题，我正在使用Javascript更改某些div的背景颜色，但是“ document.getElementById”未找到div并返回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
}

“ id”是一个来自php函数的字符串，它可以工作，因为当我尝试执行alert(id) ，它会正确显示（r1h1），但是当我尝试使用该“ id”查找div时，它将返回NULL。 此外，我试图找到其他div，它的作用相同。

这是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>

我在这里调用Javascript函数：

PHP：

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

最奇怪的是，我还有另一个函数可以找到相同的div，并且可以正常工作，此函数出了点问题...

Answer 1

您将在文档中的div之前输出colorFill（）函数。 您必须切换顺序，以确保在调用colorFill（）JS函数之前 ，元素已在文档中全部就位，如下所示：

<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(); }
?>

另一个选择是重构代码，以便fillGameTable（）PHP函数返回一个在文档就绪事件中执行的javascript。

Answer 2

如果要从PHP调用JavaScript函数 ，请确保正确引用了该函数的参数：

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

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

PHP中可能有类似以下内容的东西：

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

您需要的是这个（注意在参数周围包括引号）：

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