Javascript 将事件侦听器添加到阵列_Javascript

Javascript 将事件侦听器添加到阵列

javascript

Javascript 将事件侦听器添加到阵列,javascript,Javascript,我正在做家庭作业，弄不明白为什么会收到错误消息（undefined不是一个对象（评估'buttons[I].style'））我一直在尝试通过按钮数组循环，并向列表中的每个项目添加事件侦听器 var buttons = document.getElementsByClassName("quality"); for(var i = 0; i < buttons.length; i += 1){ buttons[i].addEventListener('click', function (i)

我正在做家庭作业，弄不明白为什么会收到错误消息（undefined不是一个对象（评估'buttons[I].style'））我一直在尝试通过按钮数组循环，并向列表中的每个项目添加事件侦听器

var buttons = document.getElementsByClassName("quality");
for(var i = 0; i < buttons.length; i += 1){
buttons[i].addEventListener('click', function (i) {
    buttons[i].style.background = "red";
});
}



<!doctype html>

<html>
<head>
 <title>L.A. Hiking</title>
 <link rel="stylesheet" href="css/hiking.css">
 </head>

<ul id = "navbar">
    <li><a href="index.html" class= "selected">Home</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="about.html">About</a></li>
</ul>
<body>

<div>
    <div class="blocks" id="selections">
        <ul id= "attr1">
            <li class="Instruction">Pick one:</li>
            <li class ="quality">Hard</li>
            <li class ="quality">Medium</li>
            <li class ="quality">Easy</li>
        </ul>

        <ul id = "attr2">
            <li class="Instruction">Pick one:</li>
            <li class ="quality">Hard</li>
            <li class ="quality">Medium</li>
            <li class ="quality">Easy</li>
        </ul>

        <ul id = "attr3">
            <li class="Instruction">Pick one:</li>
            <li class ="quality">Hard</li>
            <li class ="quality">Medium</li>
            <li class ="quality">Easy</li>
        </ul>
    </div>  
    <div class="blocks" id="results">
        <ul id = "choices">
            <li class="choice">Pick one:</li>
            <li class ="choice">Hard</li>
            <li class ="choice">Medium</li>
        </ul>
    </div>
</div>
<div id="button-container">
    <button>Go!</button>
</div>

<script src="javascript/hiking.js"></script>
</body>
</html>

var buttons=document.getElementsByClassName（“质量”）；
对于（变量i=0；i





选择一个：
硬
中等
简单


选择一个：
硬
中等
简单


选择一个：
硬
中等
简单


选择一个：
难
中等

走！

对于

addEventListener

的回调不会为您提供所单击按钮的索引，而是一个事件对象。然后，您可以使用

event.target

访问该按钮：

for(var i = 0; i < buttons.length; i += 1){
    buttons[i].addEventListener('click', function (e) {
        e.target.style.background = "red";
    });
}

for（变量i=0；i


根据：
由于要将事件绑定到对象本身，因此还可以
使用上下文aka this so e.target.style.background=“red”；变成
this.style.background=“红色”
for（变量i=0；i

document.getElementsByClassName（“质量”）
返回节点列表
对象中与类名质量匹配的所有元素的集合。从您发布的代码来看，似乎您拥有的是质量类名称的列表项
，而不是按钮
元素
更重要的是，addEventListener
回调将把参数中的事件信息传递给回调。属性event.target
返回注册了事件的元素，在本例中是列表项[i]
。因此，您需要使用e.target
作为e.target.style.background=“red”


var list items=document.getElementsByClassName（“质量”）；
对于（变量i=0；i


洛杉矶徒步旅行






选择一个：
硬
中等
简单


选择一个：
硬
中等
简单


选择一个：
硬
中等
简单


选择一个：
难
中等

走！
除了每个人建议将事件附加到每个代码> Li。Qualue/Cuth>元素，你也可以考虑这个模式。
您可以通过利用事件冒泡（）将一个事件附加到父元素（而不是为每个li.quality
元素提供一个事件侦听器）

let selectionsElement=document.querySelector（“#selections”）；
SelectionElement.addEventListener（'click'，函数（事件）{
//阻止事件在DOM树中进一步冒泡
event.stopPropagation（）；
/*
“this”关键字将引用#selections元素
所以我们不能用这个方法，所以我们只能用'event'`
*/
//检查触发事件的元素是否为li.quality
if（event.target.classList.contains（'quality'））{
event.target.style.backgroundColor='红色'；
}
});

洛杉矶徒步旅行






选择一个：
硬
中等
简单


选择一个：
硬
中等
简单


选择一个：
硬
中等
简单


选择一个：
难
中等

走！
另外，因为您要将事件绑定到其对象
for(var i = 0; i < buttons.length; i += 1){
    buttons[i].addEventListener('click', function () {
        this.style.background = "red";
    });
}