我正在尝试做家庭作业并弄糊涂为什么我收到错误信息（未定义不是对象（评估'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>
答案 0 :(得分：1)
addEventListener的回调不会为您提供单击按钮的索引，而是一个事件对象。然后，您可以使用event.target：
for(var i = 0; i < buttons.length; i += 1){
buttons[i].addEventListener('click', function (e) {
e.target.style.background = "red";
});
}
根据@Sgnl：
因为您将事件绑定到对象本身，您也可以 使用上下文也就是这样e.target.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";
});
}
答案 1 :(得分：0)
document.getElementsByClassName("quality");返回与NodeList对象中的类名 quality 匹配的所有元素的集合。根据您发布的代码，您似乎拥有{em>质量类名的listitem而不是button元素。
更重要的是，addEventListener回调会将参数中的事件信息传递给回调。属性event.target返回事件已注册的元素，在本例中为listItem[i]。因此，您需要将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>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>
答案 2 :(得分：0)
除了每个人都建议将事件附加到每个li.quality元素之外，您还可以考虑这种模式。
您可以利用事件冒泡（see SO post here）将一个事件附加到父元素（而不是每个li.quality元素都有一个事件侦听器）。
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>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>