使用 addEventListener 引用 JavaScript 中的调用 object

Question

我是 JavaScript/HTML/CSS 的新手，我无法发现我在 JavaScript function 中犯的错误。 Out 老师告诉我们使用 addEventListener 方法，因为它有一些显着的优势。

这是我的整个脚本，有问题的 function

 var espandi = function (e) {
    var toHide = document.getElementsByClassName("optional");
    for (var index = 0; index < toHide.length; index++)
        toHide[index].style.display = "none";
    var toShow = e.target.getElementsByClassName("optional");
    for (index = 0; index < toShow.length; index++)
        toShow[index].style.display = "block";
}
var expansibleObjects = document.getElementsByClassName("singleresult");
for (var index = 0; index < expansibleObjects.length; index++)
    expansibleObjects[index].onclick = espandi();

事实是 e.target.addEventListener() 行让我遇到了这种类型的错误 Uncaught TypeError: Cannot read properties of undefined (reading 'getElementsByClassName')。 相反，如果我直接在元素上设置具有“onclick”属性的 function ，则 function 可以完美运行。 所以我认为问题在于使用“e.target”来调用 object

Answer 1

您正在调用espandi而不是将其分配给onclick处理程序。

所以你需要删除()并做expansibleObjects[index].onclick = espandi;

无论如何，在你的问题中我没有看到任何e.target.addEventListener()所以当你说The fact is the line e.target.addEventListener() gets me an error ，我不明白你的意思，也许你必须添加更多代码。