使用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 . "')";