Javascript addEventListener不是一个函数

嗨，我正在尝试使用“关闭”按钮关闭分区。。 这是密码

var closeIcon=document.getElementsByClassName('.monique-close-icon');  

    function closeBigImgAndContainer()
{
    MoniqueDiv.style.display= "none";
    currentBigImageToDisplay.style.display="none";
};

closeIcon.addEventListener("click", closeBigImgAndContainer);

但在控制台中有一个错误 未捕获类型错误：closeIcon.addEventListener不是函数（匿名函数）@main.js:14

---

请告诉我哪里做错了…谢谢。

getElementsByClassName

返回元素数组，

addEventListener

存在于元素上

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); 
}

修复方法是迭代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);
}

var closeIcons=document.getElementsByClassName（'.monique close-icon'）；
函数closeBigImgAndContainer（）
{
MoniqueDiv.style.display=“无”；
currentBigImageToDisplay.style.display=“无”；
};
对于（i=0；i

看起来

closeIcon

变量的值未定义。
这是因为方法将

类

名称作为其参数

您可以尝试按以下方式修复它：

var closeIcons = document.getElementsByClassName('monique-close-icon');
var i = closeIcons.length;
while (i--)
  closeIcons[i].addEventListener("click", closeBigImgAndContainer);

---

该方法还返回节点的集合，而不是单个元素。要分配事件侦听器，我们需要循环该集合并将事件分配给其中的每个DOM元素。

首先，您的选择器是错误的。应该是这样的：

var closeIcon = document.getElementsByClassName('monique-close-icon');  

然后需要像处理数组一样附加事件处理程序，因为.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); 
}

var closeIcon=document.getElementsByClassName（'monique-close-icon'）；
函数closeBigImgAndContainer（e）
{
MoniqueDiv.style.display=“无”；
currentBigImageToDisplay.style.display=“无”；
};
对于（变量i=0；i

下面是一个工作示例：

---

选择器错误是对的，但问题是您无法对元素集合调用addEventListener。如果他想将事件处理程序附加到所有元素，该怎么办？我相信他试图用一种方法将同一个事件侦听器添加到所有元素，这是不可能的，看看这个集合怎么没有这个名称的方法。除了你的答案之外，选择器也错了。@Syadani我添加了和id，它成功了。谢谢。从技术上讲，它返回一个类似数组的集合。请参阅此提琴，了解您正在尝试执行的工作示例。