".addEventListener не является функцией", почему возникает эта ошибка?

Question

Я получаю ошибку «.addEventListener is not a function». Я застрял на этом:

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 возвращает массив элементов. так что вы можете настроить таргетинг на определенный индекс: var comment = document.getElementsByClassName('button')[0]; должен получить то, что вы хотите.

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: (с removeEventListener включены, а)

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

Проблема с кодом является то, что ваш скрипт выполняется до того, как доступен элемент html. Из-за этого var comment - пустой массив.

Итак, вы должны перенести свой скрипт после того, как элемент html будет доступен.

Кроме того, getElementsByClassName возвращает коллекцию HTML, так что если вам нужно добавить прослушиватель событий к элементу, вам нужно будет сделать что-то вроде следующего

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

Если вы хотите добавить слушатель событий для всех элементов, то вам нужно перебрать их

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>