Question

我正在做一个小项目，这是我的第一次，所以我有一些困难要克服。我正在为过滤搜索创建一个动态列表，问题是我尝试使用php添加元素，我希望它们更改可见性onclick，为此我使用的css代码功能齐全，但问题在于javascript哪个告诉我：

script.js：4 Uncaught TypeError：无法读取属性＆＃39; classList＆＃39;的空值 at visibilityToggle（script.js：4）在HTMLDivElement.onclick（afficherDept.php：4）

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 . '>';

result in 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

{{1}}我解决了这个问题。在我的js函数visibilityToggle中，参数id是一个html元素而不是一个字符串。我不知道为什么，但它有问题

如何通过PHP从javascript访问添加的元素

3 个答案: