".addEventListener不是函数"为什么会出现此错误？

Question

我得到一个".addEventListener不是函数"错误.我坚持这个:

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

您的代码的问题是您的脚本在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 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);
}

Answer 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>

Answer 4

当您想要的是分配给 var 注释的元素时，代码的第一行返回一个数组并将其分配给 var 注释...

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

因此，当您需要在数组中的实际元素上使用方法 addEventListener() 时，您尝试在数组上使用方法 addEventListener() 。您需要通过访问数组中的元素来返回一个元素而不是数组，因此 var 注释本身被分配一个元素而不是数组。

改变...

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

到...

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

Answer 5

对于“.addEventListener 不是函数”错误，您需要注意的另一件重要的事情是，该错误可能是由于为其分配了错误的对象而导致的，例如考虑

let myImages = ['images/pic1.jpg','images/pic2.jpg','images/pic3.jpg','images/pic4.jpg','images/pic5.jpg'];
let i = 0;
while(i < myImages.length){
  const newImage = document.createElement('img');
  newImage.setAttribute('src',myImages[i]);
  thumbBar.appendChild(newImage);

 //Code just below will bring the said error 
 myImages[i].addEventListener('click',fullImage);

 //Code just below execute properly 
  newImage.addEventListener('click',fullImage);




  i++;
}

在上面的代码中，我基本上使用 JavaScript 动态地将图像分配给 html 中的 div 元素。我通过将图像写入数组并通过 while 循环将它们循环并将所有图像添加到 div 元素来完成此操作。

然后我为所有图像添加了一个单击事件侦听器。

代码“myImages[i].addEventListener('click',fullImage);” 会给你一个错误“addEventListener不是一个函数”，因为我将一个addEventListener链接到一个没有addEventListener()函数的数组对象。

但是对于代码“newImage.addEventListener('click',fullImage);” 它能够正确执行，因为 newImage 对象可以访问函数 addEventListener()，而数组对象则不能。

如需更多说明，请点击链接：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function