将事件侦听器添加到数组

Question

Im trying to do homework assignment and confused why I'm getting error message(undefined is not an object (evaluating 'buttons[i].style')) any help appreciated Ive been trying to loop through the buttons array and add an Event Listener to each item in the list我正在尝试做家庭作业并困惑为什么我会收到错误消息（未定义不是对象（评估'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>

Answer 1

The callback for addEventListener doesn't give you the index of the button clicked but an event object. addEventListener的回调不会给你点击按钮的索引，而是一个事件对象。 You can then access the button using event.target :然后您可以使用event.target访问按钮：

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

As per @Sgnl :根据@Sgnl ：

since you are binding to the event to the object itself you could also use context aka this so e.target.style.background = "red";由于您将事件绑定到对象本身，因此您也可以使用上下文即 this，因此 e.target.style.background = "red"; becomes this.style.background = "red";变成 this.style.background = "red";

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

Answer 2

document.getElementsByClassName("quality"); returns the collection of all the elements matching the class name quality in a NodeList object.返回与NodeList对象中的类名quality匹配的所有元素的集合。 From the code you posted, it seems that you are having the listitem and not the button element for the quality class name.从您发布的代码来看，您似乎拥有的是listitem而不是质量类名称的button元素。
More importantly, the addEventListener callback would pass in the event information in the parameter to the callback.更重要的是， addEventListener回调会将参数中的事件信息传递给回调。 The property event.target returns the element on which the event was registered , which in this case is the listItem[i] .属性event.target返回注册事件的元素，在本例中是listItem[i] 。 So, you need to use the e.target as e.target.style.background = "red";所以，你需要使用e.target作为e.target.style.background = "red";

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

 <html> <head> <title>LA 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>

Answer 3

In addition to everyone suggesting attaching an event to each li.quality element, you could also consider this pattern.除了每个人都建议为每个li.quality元素附加一个事件li.quality ，您还可以考虑这种模式。

You can attach one event to the parent element (instead of having an event listener for each li.quality element) by taking advantage of Event Bubbling ( see SO post here ).您可以利用事件冒泡将一个事件附加到父元素（而不是为每个li.quality元素设置一个事件侦听器）（请参阅此处的 SO 帖子）。

 let selectionsElement = document.querySelector('#selections'); selectionsElement.addEventListener('click', function(event) { // stop event from bubbling further up the DOM tree event.stopPropagation(); /* the `this` keyword will refer to the #selections element so we can't use it with this approach so we'll have to use `event` */ // check if the element which triggered the event is li.quality if (event.target.classList.contains('quality')) { event.target.style.backgroundColor = 'red'; } });

 <html> <head> <title>LA 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>

将事件侦听器添加到数组

问题描述

3 个解决方案

解决方案1
2 2017-01-15 01:14:48

解决方案2
0 2017-01-15 01:24:58

解决方案3
0 2017-01-15 02:27:48

将事件侦听器添加到数组

问题描述

3 个解决方案

解决方案1 2 2017-01-15 01:14:48

解决方案2 0 2017-01-15 01:24:58

解决方案3 0 2017-01-15 02:27:48

解决方案1
2 2017-01-15 01:14:48

解决方案2
0 2017-01-15 01:24:58

解决方案3
0 2017-01-15 02:27:48