添加事件監聽器到一個數組

我試圖做家庭作業和混淆爲什麼我得到錯誤消息（undefined不是一個對象（評估'按鈕[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>

來源

2017-01-15 Chris Wallace

爲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"; 
    }); 
}

來源

2017-01-15 01:14:48

此外，由於要綁定到事件對象本身你也可以使用上下文又名'this'所以'e.target.style.background =「紅」;'變'this.style.background =「red」;' – Sgnl

document.getElementsByClassName("quality");返回所有在NodeList對象相匹配的類名質量元素的集合。從您發佈的代碼看來，您似乎是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>

來源

2017-01-15 01:24:58 Agalo

此外，由於您將事件綁定到對象本身，所以您也可以使用上下文又名'this'，這樣e.target.style.background =「red」;變成this.style.background =「red」; – Sgnl

除了給大家提示的事件連接到每個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>

來源

2017-01-15 02:27:48 Sgnl

添加事件監聽器到一個數組

回答

相關問題