".addEventListener ist keine Funktion" Warum tritt dieser Fehler auf?

Question

Ich erhalte den Fehler ".addEventListener ist keine Funktion". Ich bin auf diese stecken:

var comment = document.getElementsByClassName("button"); 
function showComment() { 
    var place = document.getElementById('textfield'); 
    var commentBox = document.createElement('textarea'); 
    place.appendChild(commentBox); 
} 
comment.addEventListener('click', showComment, false); 

<input type="button" class="button" value="1"> 
<input type="button" class="button" value="2"> 
<div id="textfield"> 
</div> 

Answer 1

document.getElementsByClassName gibt ein Array von Elementen. Vielleicht möchten Sie einen bestimmten Index von ihnen gezielt: var comment = document.getElementsByClassName('button')[0]; sollten Sie bekommen, was Sie wollen.

Update # 1:

var comments = document.getElementsByClassName('button'); 
var numComments = comments.length; 

function showComment() { 
    var place = document.getElementById('textfield'); 
    var commentBox = document.createElement('textarea'); 
    place.appendChild(commentBox); 
} 
for (var i = 0; i < numComments; i += 1) { 
    comments[i].addEventListener('click', showComment, false); 
} 

Update # 2: (mit removeEventListener auch eingebaut)

var comments = document.getElementsByClassName('button'); 
var numComments = comments.length; 

function showComment(e) { 
    var place = document.getElementById('textfield'); 
    var commentBox = document.createElement('textarea'); 
    place.appendChild(commentBox); 
    for (var i = 0; i < numComments; i += 1) { 
    comments[i].removeEventListener('click', showComment, false); 
} 
} 
for (var i = 0; i < numComments; i += 1) { 
    comments[i].addEventListener('click', showComment, false); 
} 

Answer 2

Das Problem mit Ihrem Code ist, dass das Ihre Das Skript wird ausgeführt, bevor das HTML-Element verfügbar ist. Aufgrund dessen ist var comment ein leeres Array.

Sie sollten also Ihr Skript verschieben, nachdem das HTML-Element verfügbar ist.

, auch getElementsByClassName kehrt html Sammlung, also wenn Sie Ereignis-Listener zu einem Element hinzufügen müssen, müssen Sie etwas wie folgt

comment[0].addEventListener('click' , showComment , false) ; 

tun Wenn Sie Ereignis-Listener auf alle Elemente hinzufügen möchten, dann werden Sie

for (var i = 0 ; i < comment.length; i++) { 
    comment[i].addEventListener('click' , showComment , false) ; 
} 

Answer 3

var comment = document.getElementsByClassName("button"); 
 

 
function showComment() { 
 
    var place = document.getElementById('textfield'); 
 
    var commentBox = document.createElement('textarea'); 
 
    place.appendChild(commentBox); 
 
} 
 

 
for (var x in comment) { 
 
    comment[x].onclick = function() { 
 
    showComment(); 
 
    }; 
 
}

<input type="button" class="button" value="1"> 
 
<input type="button" class="button" value="2"> 
 
<div id="textfield"></div>

Schleife durch sie brauchen