Passing objects in JS Function in recursion

Question

I'm working on this currently:

I have a div "out" and a button "in".
Click the button, Create div "extra" and button "extra_b"
At the same time, "out"and "in" hide.
click "extra_b", "out"and "in" appears, and DELETE "extra" and button "extra_b"

Here is the sample:FIDDLE

It can't work, and after I checked console, It probably tells me:

inner.onclick=function(){ add(outer[i]) };

unable to pass the object of current out element to the function correctly:

function add(objectIn){
}

Could you please tell me how to pass the elements to a function in a recursion? And how to modify my current code to make it run correctly?

Thanks a lot!

@Quentin perhaps no. My recursion is used to apply functions to all the main elements — Darklizard, Jun 18 '13 at 08:56

score 0 · Accepted Answer · edited May 23 '17 at 12:13

0

This is a common problem is JavaScript. When you are binding the onclick event, you are not using the current value of i but rather when the click happens, the last value of i is used.

So you have to do:

inner.onclick= (function(i){ return function(){ add(outer[i]) })(i);

edited May 23 '17 at 12:13

Community

1
1

answered Jun 18 '13 at 08:49

Maxim Krizhanovsky

26,265
5
59
89

Many thanks!! And little mistakes on bracket in your code: inner.onclick= function(i){ return function(){ add(outer[i]) } }(i); – Darklizard Jun 18 '13 at 09:32

score 0 · Answer 2 · answered Jun 18 '13 at 09:06

0

You can either create a new closure like Darhazer suggested, or you if you don't mind using jQuery you can use jQuery.proxy():

inner.onclick = $.proxy(add, window, outer[i]);

answered Jun 18 '13 at 09:06

Strille

5,741
2
26
40

Passing objects in JS Function in recursion

2 Answers2