javascript - 使用 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。