0

So I had built a Boostrap page whereby I have an array (or list) of child nodes for selection from a dropdown menu. I wanted to detect which node had been clicked and then display the value in the new value in the menu button.

Initially I tried to detect a click event via the following code: 

 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;

       });
 }

However the above does not work, and menu[i].firstChild.innerHTML always seems to be undefined. I was wondering why this is the case?

I found a solution to the problem using this code from another question:

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

From: Detecting which node was clicked in javascript

However, I fail to really understand what is going on here. What are we actually passing into the first for loop? This seems to be (function(index){//code})(i); I can't say I have seen this syntax before. Then what is the purpose of the second for loop?

I would be very grateful if a better programmer than myself could explain to me what is going on here.

Kind Regards,

Community
  • 1
  • 1
Mathias
  • 555
  • 1
  • 8
  • 19
  • what is the `menu` variable? – webdeb Jun 24 '16 at 17:10
  • Are you using the default JavaScript Bootstrap Plugins? If you do, you can realize it much more easily with jQuery using the sizzle selectors and the native jQuery. – Daniel Jun 24 '16 at 17:10
  • menu just refers to the list of nodes or options from which to select from the dropdown – Mathias Jun 24 '16 at 17:11

1 Answers1

1

In your initial code you addEventListener to innerHTML which is string and is deaf to click. Easy fix is possible.

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;
       });
 }
Alex Kudryashev
  • 9,120
  • 3
  • 27
  • 36
  • Excellent, that works well! You do not need that second for loop and wrapping function after all. So my next question is, within the EventListener, why is menu[i].firstchild.innerHTML undefined, while this.innerHTML is not? Why do we have to use the key word this? – Mathias Jun 24 '16 at 17:50