Arbeits Code bringt Fehler addEventListener ist keine Funktion

Question

Ich benutze diesen Code:

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

und es funktioniert perfekt, fügt es Ereignis auf Elemente klicken, aber Chrome hält mir zu sagen, dieses:

Uncaught Typeerror: document .getElementsByClassName (...) [el] .addEventListener ist keine Funktion (...)

Wie verhindere ich, dass Chrome einen Fehler im Arbeitscode gibt?

Answer 1

document.getElementsByClassName() gibt ein HTMLCollection-Objekt zurück.

Dieses Objekt hat numerische Eigenschaften, hat aber auch andere Eigenschaften, die in einer For/In-Enumeration enthalten sind.

Verwenden Sie also nicht für/in mit der HTMLCollection, die von document.getElementsByClassName() zurückgegeben wird, weil es andere Eigenschaften dieser Datenstruktur zurückgibt, die nicht die gewünschten Elemente sind.

Verwenden Sie stattdessen eine normale for Schleife.

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

Sehen Sie diese andere Antwort For loop for HTMLCollection elements für viele weitere Details einschließlich coole Möglichkeiten, diese Iteration in ES6 zu tun Array.from() oder Wege mit for/of Schleifen verwenden.

Answer 2

Statt dessen versuchen Sie, Sie könnten den folgenden Ausschnitt verwenden, um die gleiche Aufgabe zu erledigen.

// 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); 
    } 
} 

In dem obigen Code-Schnipsel, beachten Sie, dass wir eine einfache for Struktur und keine for...in Struktur verwendet haben. Letzteres macht etwas anderes als die for. Es durchläuft die Tasten des Objekts, das Sie nach dem in haben.