Javascript “.addEventListener is not a function”为什么会出现这个错误？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32027935/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
".addEventListener is not a function" why does this error occur?
提问by leecarter
I'm getting an ".addEventListener is not a function" error. I am stuck on this:
我收到“.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>
回答by Nikhil Aggarwal
The problem with your code is that the your script is executed prior to the html element being available. Because of the that var commentis an empty array.
您的代码的问题在于您的脚本是在 html 元素可用之前执行的。因为这var comment是一个空数组。
So you should move your script after the html element is available.
所以你应该在 html 元素可用后移动你的脚本。
Also, getElementsByClassNamereturns html collection, so if you need to add event Listener to an element, you will need to do something like following
此外，getElementsByClassName返回 html 集合，因此如果您需要向元素添加事件侦听器，则需要执行以下操作
comment[0].addEventListener('click' , showComment , false ) ;
If you want to add event listener to all the elements, then you will need to loop through them
如果要将事件侦听器添加到所有元素，则需要遍历它们
for (var i = 0 ; i < comment.length; i++) {
comment[i].addEventListener('click' , showComment , false ) ;
}
回答by Tahir Ahmed
document.getElementsByClassNamereturns an arrayof elements. so may be you want to target a specific index of them: var comment = document.getElementsByClassName('button')[0];should get you what you want.
document.getElementsByClassName返回一个元素数组。所以可能你想针对它们的特定索引：var comment = document.getElementsByClassName('button')[0];应该得到你想要的。
Update #1:
更新 #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);
}
Update #2:(with removeEventListenerincorporated as well)
更新＃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);
}
回答by antelove
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>回答by DreamBird
The first line of your code returns an array and assigns it to the var comment, when what you want is an element assigned to the var comment...
代码的第一行返回一个数组并将其分配给 var 注释，当您想要的是分配给 var 注释的元素时...
var comment = document.getElementsByClassName("button");
So you are trying to use the method addEventListener() on the array when you need to use the method addEventListener() on the actual element within the array. You need to return an element not an array by accessing the element within the array so the var comment itself is assigned an element not an array.
因此，当您需要在数组中的实际元素上使用 addEventListener() 方法时，您正在尝试在数组上使用 addEventListener() 方法。您需要通过访问数组中的元素来返回一个元素而不是数组，以便为 var 注释本身分配一个元素而不是数组。
Change...
改变...
var comment = document.getElementsByClassName("button");
to...
到...
var comment = document.getElementsByClassName("button")[0];
回答by MosesK
Another important thing you need to note with ".addEventListener is not a function" erroris that the error might be coming a result of assigning it a wrong object eg consider
您需要注意“.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++;
}
In the code Above I am basically assigning images to a div element in my html dynamically using javascript. I've done this by writing the images in an array and looping them through a while loop and adding all of them to the div element.
在上面的代码中，我基本上是使用 javascript 动态地将图像分配给我的 html 中的 div 元素。我通过将图像写入数组并通过 while 循环循环它们并将它们全部添加到 div 元素来完成此操作。
I've then added a click event listener for all images.
然后我为所有图像添加了一个点击事件侦听器。
The code "myImages[i].addEventListener('click',fullImage);"will give you an error of "addEventListener is not a function" because I am chaining an addEventListener to an array object which does not have the addEventListener() function.
代码“myImages[i].addEventListener('click',fullImage);” 会给你一个“addEventListener 不是函数”的错误，因为我将 addEventListener 链接到一个没有 addEventListener() 函数的数组对象。
However for the code "newImage.addEventListener('click',fullImage);"it executes properly because the newImage object has access the function addEventListener() while the array object does not.
但是对于代码“newImage.addEventListener('click',fullImage);” 它可以正确执行，因为 newImage 对象可以访问函数 addEventListener() 而数组对象没有。
For more clarification follow the link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function
如需更多说明，请点击链接：https: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function
回答by midnightgamer
Try this one:
试试这个：
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);
Use querySelectorinstead of className
使用querySelector代替className
