Get clicked onclick element

Question

var submenus = document.getElementsByClassName("submenu"); for (var i = 0; i < submenus.length; i++) { submenus[i].onclick = function() { toggle(submenus[i].nextSibling); return false; } } function toggle(el) { if (el.style.display == 'block') { el.style.display = 'none'; } else { el.style.display = 'block'; } } 

Causes an error: TypeError: submenus[i] is undefined

I assume that submenus[i] not included in the scope of the function. How to get an item by clicking so that I can switch its next brother?

Answer 1

 var submenus = document.getElementsByClassName("submenu"); for (var i = 0; i < submenus.length; i++) { submenus[i].onclick = function() { toggle( this.nextSibling); return false; } } 

Inside such an event handler, the this keyword is bound to the element that caused the event. Therefore, in your example, you can use this to refer to a submenu element and, therefore, to its sibling.

See @FelixKling link for more information: http://quirksmode.org/js/this.html

Answer 2

You can do it:

 var submenus = document.getElementsByClassName("submenu"); for (var i = 0; i < submenus.length; i++) { (function(e){ submenus[i].onclick = function() { toggle(e); return false; } })(submenus[i].nextSibling); } 

The function called immediately creates an area in which submenus[i].nextSibling .

Answer 3

It should look like this:

  var submenus = document.getElementsByClassName("submenu"); for (var i = 0; i < submenus.length; i++) { (function(i){ submenus[i].onclick = function() { toggle(submenus[i].nextSibling); return false; }; })(i); } function toggle(el) { if (el.style.display == 'block') { el.style.display = 'none'; } else { el.style.display = 'block'; } } 

Answer 4

 var submenus = document.getElementsByClassName("submenu"); for (var i = 0; i < submenus.length; i++) { submenus[i].onclick = (function(j) { return function () { // alert(j); toggle(submenus[j].nextSibling); return false; }; })(i); } 

---

Because the onclick function fires after your for loop, so whenever the user clicks on the desired element i will be the length your elements:

 <div class="submenu">Hello</div> <div class="submenu">Hello</div> <div class="submenu">Hello</div> <div class="submenu">Hello</div> <div class="submenu">Hello</div> <div class="submenu">Hello</div> 

And with your code:

 var submenus = document.getElementsByClassName("submenu"); for (var i = 0; i < submenus.length; i++) { submenus[i].onclick = function() { alert(i); } } 

You will get 6 for i for each element (check jsFiddle ).

You must save i inside the onclick function, closing will help you:

 for (var i = 0; i < submenus.length; i++) { submenus[i].onclick = (function(j) { return function () { alert(j); }; })(i); } 

As you can see, I created a function and immediately executed it (with the parameter that I called j ), and the value for each element is i ). Return is another function. Check out jsFiddle .