工作代码带来错误addEventListener不是一个函数

Working code brings error addEventListener is not a function

本文关键字：函数 一个 代码 错误 addEventListener 工作      更新时间：2023-09-26

我使用以下代码:

for (el in document.getElementsByClassName("close-sidenav"))
document.getElementsByClassName("close-sidenav")[el].addEventListener("click", closeSidenav);

和它的工作完美，它添加点击事件的元素，但Chrome一直告诉我这个:

未捕获的类型错误:document.getElementsByClassName(…)[el]。addEventListener不是一个函数(…)

如何防止Chrome在工作代码上给我错误?

document.getElementsByClassName()返回一个HTMLCollection对象。

该对象具有数字属性，但也具有将包含在for/in枚举中的其他属性。

因此，不要使用for/in与document.getElementsByClassName()返回的HTMLCollection，因为它会返回该数据结构的其他属性，而不是你想要的元素。

使用常规的for循环。

var list = document.getElementsByClassName("close-sidenav");
for (var i = 0; i < list.length; i++) {
    list[i].addEventListener("click", closeSidenav);
}

查看HTMLCollection元素的For循环的其他答案，了解更多细节，包括在ES6中使用Array.from()或使用for/of循环进行此迭代的酷方法。

您可以使用下面的代码片段来完成相同的工作。

// Initially we grab once here the elements
var elements = document.getElementsByClassName("close-sidenav"); 
if(elements){
    // We found elements with the specified class.
    for (var i=0; i<elements.length; i++){
        // Then we attach here an event listener to them.
        elements[i].addEventListener("click", closeSidenav);
    }
}
在上面的代码片段中，注意我们使用了一个简单的for结构体，而不是for...in结构体。后者与for相比做了一些不同的事情。它循环遍历在in之后的对象的键。
相关文章：