".addEventListener non è una funzione" perché si verifica questo errore?

Question

Ricevo un errore ".addEventListener non è una funzione". Sono bloccato su questo:

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 restituisce un serie di elementi. quindi potresti voler scegliere come target un indice specifico: var comment = document.getElementsByClassName('button')[0]; ti dovrebbe ottenere ciò che desideri.

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

Aggiornamento # 2: (con removeEventListener incorporato così)

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

Il problema con il vostro codice è che la vostra lo script viene eseguito prima che l'elemento html sia disponibile. A causa di ciò, var comment è un array vuoto.

Quindi è necessario spostare lo script dopo che l'elemento html è disponibile.

Inoltre, getElementsByClassName rendimenti raccolta html, quindi se avete bisogno di aggiungere listener di eventi a un elemento, si avrà bisogno di fare qualcosa di simile in seguito

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

Se si desidera aggiungere listener di eventi a tutti gli elementi, allora si avrà bisogno di un ciclo tra loro

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>