ClassName vs Id - Javascript Funktionen

Entschuldigung im Voraus, wenn dies super einfach erscheint.ClassName vs Id - Javascript Funktionen

Ich bin verwirrt, warum dies funktioniert:

<div id="box">Hello World</div> 
<button id="myButton">Click</button> 

<script> 
    let myBox = document.getElementById('box'); 
    let myButton = document.getElementById('myButton'); 

    myFunction =() => {       
     myBox.innerHTML = 'Thanks'; 
    } 

    myButton.addEventListener("click", myFunction); 
</script>

Aber dies nicht:

<div class="box">Hello World</div> 
<button class="myButton">Click</button> 

<script> 
    let myBox = document.getElementsByClassName('box'); 
    let myButton = document.getElementsByClassName('myButton'); 

    myFunction =() => {       
     myBox.innerHTML = 'Thanks'; 
    } 

    myButton.addEventListener("click", myFunction); 
</script>

Die zweite, die durch Klassennamen des DOM-Element bekommt anstatt Id generiert die folgende Fehler in der Konsole:

Uncaught TypeError: myButton.addEventListener is not a function

Hatte gesucht, aber scheint keine klare Antwort zu finden.

Danke!

Quelle

2017-08-02 Alex Herrera

Verwenden 'window.querySelector', wenn Sie ein einzelnes Element durch eine Klasse – MinusFour

Der Name der Funktion enthält bereits einen Hinweis auswählen müssen: getElement ** s ** ByClassName eine HTMLCollection gibt, etwas Ähnliches zu eine Reihe von Elementen. Das liegt daran, dass Sie nur ein Element mit einer bestimmten ID, aber mehrere Elemente mit demselben Klassennamen haben können. Wenn Sie sicher sind, dass es nur ein Element mit dem angegebenen Klassennamen gibt, können Sie einfach 'document.getElementsByClassName ('box') [0]' verwenden. Ansonsten müssen Sie herausfinden, welche Ihrer Boxen zu der angeklickten Schaltfläche gehört. – Stephan

Danke Stephan. Das macht absolut Sinn. –

document.getElementsByClassName gibt mehrere Elemente mit dem angegebenen Klassennamen zurück, während getElementById ein einzelnes Element mit der angegebenen ID zurückgibt.

Versuchen:

let myButton = document.getElementsByClassName('myButton')[0]; // if there is single such button

Quelle

2017-08-02 15:57:45 lazyvab

Das wird nicht funktionieren, da 'getElementsByClassName' eine HTMLCollection und kein einzelnes Element zurückgibt. Vermutlich hast du die '[0]' verpasst. – Stephan

@Stephan Sie haben Recht. Ich habe vorher meinBox-Beispiel zitiert, aber dann auf myButton aktualisiert, wo ich [0] verpasst habe. Danke für das Aufzeigen. – lazyvab

Großartig, danke Leute. Sehr geschätzt. –

Um dies ändern Sie den Code als getElementsByClassName eine Liste aller Elemente mit der angegebenen Klasse zurück.

Hallo Welt

 <button class="myButton">Click</button> 

     <script> 
      let myBox = document.getElementsByClassName('box')[0]; 
      let myButton = document.getElementsByClassName('myButton')[0]; 

      myFunction =() => {       
       myBox.innerHTML = 'Thanks'; 
      } 

      myButton.addEventListener("click", myFunction); 
     </script>

Quelle

2017-08-02 16:00:11

ClassName vs Id - Javascript Funktionen

Antwort

Verwandte Themen