動作するコードは、addEventListenerは、私はこのコードを使用して機能

Question

ないエラーをもたらす：

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

をし、それが完璧に動作しますが、それは要素にイベントをクリックして追加されますが、Chromeは私にこの言って続けて：

キャッチされない例外TypeError：ドキュメントを.getElementsByClassName（...）[el] .addEventListenerは関数ではありません（...）

どのようにしてChromeがワーキングコードにエラーを表示させないようにしますか？

Answer 1

document.getElementsByClassName()は、HTMLCollectionオブジェクトを返します。

このオブジェクトには数値プロパティがありますが、for/in列挙に含まれるその他のプロパティもあります。

document.getElementsByClassName()によって返されたHTMLCollectionに/ inを使用しないでください。これは、必要な要素ではないデータ構造の他のプロパティを返すためです。

代わりに、通常のforループを使用してください。

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

クールArray.from()を使用してES6で、この繰り返しを行う方法やfor/ofループを使用する方法など、より多くの詳細については、この他の回答For loop for HTMLCollection elementsを参照してください。

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の後にあなたが持っているオブジェクトのキーをループします。