How to define javascript event handlers dynamically with a function

Question

I'm somewhat new to Javascript and I can't seem to figure out exactly what's going on with my functions.

Background: my script is supposed to let you assign a class of either "toggler" or "toggled" to an element to have them automatically linked, so checking/unchecking the toggler will show/hide the toggled (I know there are many libraries that can do this but unfortunately I can't use them in this case)

The script executes on pageload and searches through the elements for ones with the class "toggler" and then assigns its onclick handler accordingly. Here's the bit of code I'm having problems with:

  function makeToggle () {
    for (i=0;i<toggler.length;i++) { 
      toggler[i].onclick=function(){toggleSection(this,i)};
    }
  }

  function toggleSection(obj,index) {
    if (obj.checked==true) {
      toggled[index].style.display="inline-block";
    } else {
      toggled[index].style.display="none";
    }
  }

"This" is passed correctly and resolves to whatever checkbox it's applied to, but "index" is always set to the length of the toggler array instead of being incremented. For example, the first and second togglers' onclick should be:

onclick="toggleSection(this,0)"
onclick="toggleSection(this,1)"

What they are actually set for (assuming I have 5 elements defined as a toggler) is:

onclick="toggleSection(this,5)"
onclick="toggleSection(this,5)"

From what I've read I think it's a scoping problem, or the way I'm calling the function, but nothing I've found makes much sense

All the answers were very helpful. jbabey's is the accepted answer because it goes into a bit more depth on what is actually happening with a spot on explanation. Great link for helping to understand closures — ctshiner
– ctshiner, Commented Apr 3, 2012 at 16:15

Okan Kocyigit · Accepted Answer · 2012-04-02 20:32:57Z

1

you can't use that variable i like that while you are creating a function. If you do it so the value of i will be the last value of i. In your problem i will be length of toggler always.

so you should pass variable (i) as paramater to your onclick function,

try like this,

function makeToggle () {
    for (i=0;i<toggler.length;i++) { 
      toggler[i].addEventListener("click", (function(d) { return function(){ 
                    toggleSection(this,d);
      }; })(i), true);
    }
}

or in your style,

function makeToggle () {
    for (i=0;i<toggler.length;i++) { 
       toggler[i].onclick = (function(d) { return function(){toggleSection(this,d)}})(i);
    }
}

edited Apr 2, 2012 at 20:32

answered Apr 2, 2012 at 20:21

Okan Kocyigit

13.5k18 gold badges74 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

freakish Over a year ago

What ocanal wrote is correct. I've created jsFiddle example to show the diffetence. jsfiddle.net/5K2a4/1

jbabey · Accepted Answer · 2012-04-02 20:38:52Z

0

You are seeing the problem detailed in this blog post.

The reason for this is quite complicated. The anonymous functions we define as event handlers 'inherit' the variable i from the scope of attachEventsToListItems, and not the for-loop. However, by the time the event handlers are executed, the for-loop has completed its iterations and the value of i in this function has become 4. The problem here is that the functions we define as event handlers don't create a new scope for i until they are executed.

To fix the problem, you need a closure:

for (i=0;i<toggler.length;i++) { 
    toggler[i].onclick= (function (index) {
        return function() {
            toggleSection(this,index);
        };
    }) (i);
}

You can see it in actor here: http://jsfiddle.net/Vb2t2/

edited Apr 2, 2012 at 20:38

answered Apr 2, 2012 at 20:30

jbabey

46.7k12 gold badges73 silver badges94 bronze badges

2 Comments

ctshiner Over a year ago

Wow, thanks guys. Very helpful answers. That link jbabey gave me has helped point me in the right direction, learning-wise. Thanks again!

jbabey Over a year ago

@ctshiner you should accept/upvote answers that solve your problem ;)

Collectives™ on Stack Overflow

How to define javascript event handlers dynamically with a function

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related