Get clicked element onclick

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 error: TypeError: submenus[i] is undefined

I assume submenus[i] is not in the scope of the function. How do I get the element clicked so I can toggle it's next sibling?

Your problem isn't with `submenus`, it's with the index which is equal to `submenus.length` for all your handlers. See @jbabey's link. — Matt Burland, Jun 03 '13 at 13:15

Sirko · Answer 1 · 2013-06-03T13:26:21.720

6

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 triggered the event. So in your example you can use this to refer to you submenu item and thereby to its sibling.

For more information see the link @FelixKling provided: http://quirksmode.org/js/this.html

edited Jun 03 '13 at 13:26

answered Jun 03 '13 at 13:13

Sirko

72,589
19
149
183

Well... This is simpler that what I did... +1 – Denys Séguret Jun 03 '13 at 13:14
Some explanation could be useful though. http://quirksmode.org/js/this.html. – Felix Kling Jun 03 '13 at 13:23

score 0 · Answer 2 · answered Jun 03 '13 at 13:13

You can do this :

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 immediately called function creates a scope in which submenus[i].nextSibling is kept.

score 0 · Answer 3 · answered Jun 03 '13 at 13:15

It has to 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';
        }
    }

score 0 · Answer 4 · 2013-06-03T13:22:01.630

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 onclick function will fire after your for loop, so whenever the user click on desired element, the i will be the length of 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'll get 6 for i on every element (check the jsFiddle).

You must keep i inside the onclick function, closure will help you:

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

As you see, I've created a function and execute it immediately (with a parameter I've called it j, and the value of it, for each element, is the i). The return of it, is another function. Check this jsFiddle.

Get clicked element onclick

4 Answers4