Javascriptを使用しているノードのリストからclickイベントをリスンすることを理解している

Question

したがって、ドロップダウンメニューから選択するための子ノードの配列（またはリスト）を持つBoostrapページを作成しました。どのノードがクリックされたのかを検出して、メニューボタンの新しい値にその値を表示する必要がありました。 [i]は.firstChild.innerHTMLは常に未定義であるように思わ上記は動作しませんしかし

for (var i = 0; i < menu.length; i++){ 

     menu[i].firstchild.innerHTML.addEventListener("click", function(){ 

      // Assign value of node clicked on to button 
      button.childNodes[0].nodeValue = menu[i].firstChild.innerHTML; 

     }); 
} 

、およびメニュー：

は当初、私は次のコードを経由して、クリックイベントを検出しようとしました。なぜこれが当てはまるのだろう？

私は別の質問から、このコードを使用して問題の解決策を見つけた：しかし、私は本当にここで何が起こっているか理解できないDetecting which node was clicked in javascript

：から

for (var i = 0; i < menu.length; i++){ 

        (function(index) { 

         console.log(menu[index]); 
         menu[index].addEventListener("click", function(){ 

          for (var x = 0; x < menu.length; x++){ 

           if (menu[x] == this){ 

            //alert(x); 
            //console.log(button.childNodes[0].nodeValue); 
            button.childNodes[0].nodeValue = menu[x].firstChild.innerHTML; 
           } 
          } 


         }, false);     

        })(i);                 
       } 

。最初のforループに実際に何を渡していますか？これは（function（index）{// code}）（i）と思われます。私は前にこの構文を見てきたとは言えません。その後、2番目のforループの目的は何ですか？

自分よりも優れたプログラマーがここで何が起こっているのかを私に説明できたらとても感謝しています。

よろしく、あなたaddEventListener文字列であるとclickに聴覚障害者であるinnerHTMLにあなたの最初のコードで

Answer 1

。簡単な修正が可能です。

for (var i = 0; i < menu.length; i++){ 
     menu[i].firstchild.addEventListener("click", function(){ 
      // Assign value of node clicked on to button 
      //**this** is "clicked" element and what was previously menu[i].firstChild 
      //menu[i] is out of scope here (i == menu.length or something else) 
      //button is hopefully in global scope. 
      button.childNodes[0].nodeValue = this.innerHTML; 
     }); 
}