如何通过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元素而不是字符串。 我不知道为什么，但是有效