將事件偵聽器添加到數組
[英]Adding Event Listener to an array
問題描述
我正在嘗試做家庭作業並困惑為什么我會收到錯誤消息（未定義不是對象（評估'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>
3 個解決方案
解決方案1
2 2017-01-15 01:14:48
addEventListener的回調不會給你點擊按鈕的索引，而是一個事件對象。 然后您可以使用event.target訪問按鈕：
for(var i = 0; i < buttons.length; i += 1){
buttons[i].addEventListener('click', function (e) {
e.target.style.background = "red";
});
}
根據@Sgnl ：
由於您將事件綁定到對象本身，因此您也可以使用上下文即 this，因此 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";
});
}
解決方案2
0 2017-01-15 01:24:58
document.getElementsByClassName("quality");返回與NodeList對象中的類名quality匹配的所有元素的集合。 從您發布的代碼來看，您似乎擁有的是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>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
0 2017-01-15 02:27:48
除了每個人都建議為每個li.quality元素附加一個事件li.quality ，您還可以考慮這種模式。
您可以利用事件冒泡將一個事件附加到父元素（而不是為每個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>
向推入數組的 DOM 元素添加事件偵聽器
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.