“.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 is not a function”错误的另一件重要事情是错误可能是由于为其分配了错误的对象而导致的，例如考虑

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

Answer 6

试试这个：

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