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

Ответ 1

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

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

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

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

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

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

Ответ 2

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

Обновление # 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++) {
  comments[i].addEventListener('click', showComment, false);
}

Обновление № 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++) {
    comments[i].removeEventListener('click', showComment, false);
  }
}

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

Ответ 3

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

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

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

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

Ответ 4

Первая строка вашего кода возвращает массив и назначает его комментарию var, когда вам нужен элемент, назначенный для комментария var...

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

Поэтому вы пытаетесь использовать метод addEventListener() в массиве, когда вам нужно использовать метод addEventListener() для фактического элемента в массиве. Вам нужно вернуть элемент, а не массив, обратившись к элементу массива, поэтому самому комментарию var присваивается элемент, а не массив.

Изменить...

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

чтобы...

var comment = document.getElementsByClassName("button")[0];

Ответ 5

Попробуй это:

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

Используйте querySelector вместо className