如何通過javascript從php訪問添加的元素

Question

我正在做一個小項目，這是我的第一個項目，因此我很難克服。 我正在為過濾的搜索創建動態列表，問題是我嘗試使用php添加元素，並且希望它們更改onclick的可見性，為此，我使用功能齊全的css代碼，但問題出在javascript，告訴我：

script.js：4未被捕獲的TypeError：無法在HTMLDivElement.onclick（afficherDept.php：4）的visibleToggle（script.js：4）處讀取null屬性'classList'

js_Code：

function visibilityToggle(id) {
    var section = document.getElementById(id);
    section.classList().toggle("showen");
}

這是添加元素的php代碼：--- $ sectionID由循環控制

echo '<div onclick="visibilityToggle('.$sectionID.');"id='.$id.'>'.'ID 
     '.$dept["id"].'. NOM:'. $dept["nom"].'.CHEF:'.$dept["chef"].'</div>';

echo '<section class="hidden" id=' . $sectionID . '>';

產生HTML

Answer 1

用一個元素的onclick調用一個函數，然后使用document.getElementById再次搜索相同的元素是沒有意義的...

相反，我會在PHP中為您的div添加一個類，並使用javascript添加點擊處理程序。 這樣，您就知道是誰調用了處理程序，並且可以直接切換CSS類。 （注意：尚未測試過，但我希望這個想法很明確）

的PHP

echo '<div class="clickablediv">simple example</div>';

JAVASCRIPT

let clickableDivs = document.getElementsByClassname("clickablediv")
for(let d of clickableDivs){
    d.addEventListener("click", visibilityToggle)
}
function visibilityToggle(e) {
    e.target.classList().toggle("showen");
}

Answer 2

表示錯誤的原因是從您的php代碼錯誤渲染了html標記。

您需要在傳遞給visibilityToggle函數的參數前后加上引號。

'<div onclick="visibilityToggle(\''. $sectionID. '\')"'

接下來，classList是DOMTokenList對象-不是函數。

因此，您應該像這樣訪問toggle屬性：

section.classList.toggle("showen");

Answer 3

thanks for all your answers. 我解決了這個問題。 在我的js函數visibleToggle中，參數id是html元素而不是字符串。 我不知道為什么，但是有效