Question

我使用此代码：

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

它完美无缺，它会在元素上添加点击事件，但Chrome会一直告诉我：

未捕获的TypeError：document.getElementsByClassName（...）[el] .addEventListener不是函数（...）

如何阻止Chrome在处理代码时出错？

Answer 1

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

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

因此，不要在document.getElementsByClassName()返回的HTMLCollection中使用for / in，因为它将返回该数据结构中不属于您想要的元素的其他属性。

相反，请使用常规for循环。

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

有关更多详细信息，请参阅此其他答案For loop for HTMLCollection elements，其中包括使用Array.from()在ES6中执行此迭代的很酷方法，或使用for/of循环的方法。

Answer 2

您可以使用以下代码段执行相同的工作，而不是您正在尝试的。

// 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之后的对象的键。

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

2 个答案: