Javascript addEventListener 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32151704/
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
提问by Marc Andre Jiacarrini
hi i am trying to close the divs using the close click.. here is the code
嗨，我正在尝试使用关闭点击关闭 div .. 这是代码
var closeIcon=document.getElementsByClassName('.monique-close-icon');
function closeBigImgAndContainer()
{
MoniqueDiv.style.display= "none";
currentBigImageToDisplay.style.display="none";
};
closeIcon.addEventListener("click", closeBigImgAndContainer);
But in console there is an error Uncaught TypeError: closeIcon.addEventListener is not a function(anonymous function) @ main.js:14Please tell me where i am doing it wrong...Thanks.
但是在控制台中有一个错误 Uncaught TypeError: closeIcon.addEventListener is not a function(anonymous function) @ main.js:14请告诉我我哪里做错了...谢谢。
回答by syazdani
getElementsByClassNamereturns an array of elements, addEventListenerexists on elements.
getElementsByClassName返回一个元素数组，addEventListener存在于元素上。
The fix would be to iterate over the result set from getElementsByClassName and call addEventListener on each item:
修复方法是迭代 getElementsByClassName 的结果集并在每个项目上调用 addEventListener：
var closeIcons=document.getElementsByClassName('.monique-close-icon');
function closeBigImgAndContainer()
{
MoniqueDiv.style.display= "none";
currentBigImageToDisplay.style.display="none";
};
for (i = 0; i < closeIcons.length; i++) {
closeIcons[i].addEventListener("click", closeBigImgAndContainer);
}
回答by MaxZoom
It looks like the closeIconvariable has undefined value.
It is because getElementsByClassName(..)method takes the classname as its parameter.
看起来closeIcon变量具有未定义的值。
这是因为getElementsByClassName(..)方法将class名称作为其参数。
You can try to fix it as below:
您可以尝试如下修复：
var closeIcons = document.getElementsByClassName('monique-close-icon');
var i = closeIcons.length;
while (i--)
closeIcons[i].addEventListener("click", closeBigImgAndContainer);
Also the method getElementsByClassName(..)returns a collection of nodes, not a single element. To assign an event listener we need to loop that collection and assign event to each DOM element in it.
此外，方法getElementsByClassName(..)返回节点集合，而不是单个元素。要分配事件侦听器，我们需要循环该集合并将事件分配给其中的每个 DOM 元素。
回答by idream1nC0de
Firstly, your selector is wrong. It should look like this:
首先，你的选择器是错误的。它应该是这样的：
var closeIcon = document.getElementsByClassName('monique-close-icon');
Then you need to append the event handlers as if you were dealing with an Array, as the .getElementsByClassName() method returns a collection of elements.
然后，您需要像处理数组一样附加事件处理程序，因为 .getElementsByClassName() 方法返回元素集合。
var closeIcon = document.getElementsByClassName('monique-close-icon');
function closeBigImgAndContainer(e)
{
MoniqueDiv.style.display= "none";
currentBigImageToDisplay.style.display="none";
};
for (var i = 0; i < closeIcon.length; i++) {
closeIcon[i].addEventListener('click', closeBigImgAndContainer);
}
Here's a working example: http://jsfiddle.net/vhe17shd/
这是一个工作示例：http: //jsfiddle.net/vhe17shd/
