イベントリスナーを配列に追加する

私は宿題をやろうとしていて、なぜエラーメッセージが表示されるのか混同しています（定義されていないのはオブジェクトです（評価する '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>

出典

2017-01-15 Chris Wallace

addEventListenerためのコールバックは、あなたにクリックしたボタンのインデックスが、イベントオブジェクトを与えないで各項目にイベントリスナーを追加します。あなたがオブジェクト自体にイベントに結合されているので

あなた可能性もそうe.targetこの別名使用コンテキスト：
for(var i = 0; i < buttons.length; i += 1){ 
    buttons[i].addEventListener('click', function (e) { 
     e.target.style.background = "red"; 
    }); 
} 
として@Sgnlあたり：あなたはその後、event.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]）を返します。だから、あなたは各li.quality要素にイベントをアタッチ示唆皆に加えてe.target

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>

e.target.style.background = "red";として

出典

2017-01-15 01:24:58 Agalo

また、イベント自体をオブジェクトにバインドしているので、 'this'というコンテキストを使うこともできます。e.target.style.background =" red ";これは、this.style.background = "red"になります。 – Sgnl

を使用する必要がある、あなたもこのパターンを考えることができます。

イベントバブル（see SO post here）を利用して、1つのイベントを親要素に添付することができます（各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

イベントリスナーを配列に追加する

答えて

関連する問題