Javascript 单击事件时更改元素节点列表的样式

我在将eventlistener添加到此节点列表时遇到问题

我希望带有类卡img覆盖的元素在鼠标上方更改其样式

因此，我尝试的第一件事是添加for循环，如下所示：

var banner = document.getElementsByClassName("card-img-overlay");

// add a for loop for event listeners on the nodelist
for ( i = 0; i < banner.length; i++) {
    banner[i].addEventListener("click",function(){
 banner[i].style.backgroundColor = "black"});
};

var banner=document.getElementsByClassName（“卡片img覆盖”）；
//在节点列表上为事件侦听器添加for循环
对于（i=0；i

我得到以下错误：

VM95:3未捕获类型错误：无法读取未定义的属性“style” 在HTMLDEVELENT。（：3:12）

如何以更好的方式向节点列表添加eventListener？我还没有学习jQuery，所以我更喜欢使用VanillaJS

---

多谢各位

当点击事件触发时，它不再知道什么是

i

。您可以使用

this

引用单击的元素

var banner = document.getElementsByClassName("card-img-overlay");

// add a for loop for event listeners on the nodelist
for ( i = 0; i < banner.length; i++) {
    banner[i].addEventListener("click",function() {
        // function will never know what 'i' is here
        this.style.backgroundColor = "black"
    });
};

var banner=document.getElementsByClassName（“卡片img覆盖”）；
//在节点列表上为事件侦听器添加for循环
对于（i=0；i

---

Fiddle:

所以函数永远不会知道“i”是什么，因为作用域？对不起，如果我听起来很愚蠢，但我正在努力得到一个很好的理解。非常感谢你！这是正确的。click事件中的函数是匿名的，在for循环的范围之外执行。这有点让人困惑，现在有道理了。多谢各位@LucianAndrone如果解决了您的问题，请接受答案。对不起，我不知道如何正确使用该平台。非常感谢。