Need to pass local array to a function on click

Question

I am writing a menu system and I need to call a function when the user clicks on a specific row. I am using new function to pass the div that called the function as well as the row the user clicked on. All well and good until I try to pass a local array to the function. If I do the following:

for (i=0;i<tmpdropnumber;i++){
    var dv=document.getElementById(id+i);
    dv.style.cursor="pointer";  
    dv.onmouseover = new Function('dropover'+"('" + id + "','" + i + "')");
    dv.onmouseout = new Function('dropout'+"('" + id + "','" + i + "')");
    dv.onclick = new Function('dropclick'+"('" + id + "','" + i + "','"+tmparray1+"','"+tmparray2+"')");
}

As you'd expect the arrays are passed as strings. I could rebuild the arrays in the function but that seems inelegant.

if I try the following:

for (i=0;i<tmpdropnumber;i++){
    var dv=document.getElementById(id+i);
    dv.style.cursor="pointer";  
    dv.onmouseover = new Function('dropover'+"('" + id + "','" + i + "')");
    dv.onmouseout = new Function('dropout'+"('" + id + "','" + i + "')");
    dv.onclick = new Function('dropclick'+"('" + id + "','" + i + "',"+tmparray1+","+tmparray2+")");
}

Trying to pass the arrays it crashes. Any ideas on how I can achieve this? I am using jquery in my code so wither a javascript or jquery solution would be fine.

Because it is using toString() when it is building the string. — epascarello
– epascarello, Commented Feb 15, 2013 at 16:02
I'm making a custome drop down type menu. I add a bunch of divs using a loop and attach the onclick functions when they are created. Therefore when a user clicks my function knows which row was clicked on. Always works with string just can't pass arrays (or objects) as new function only seems to pass strings. — Kage
– Kage, Commented Feb 15, 2013 at 16:07
I do use JSON a lot in my code but for complex reasons I really need arrays at this part — Kage
– Kage, Commented Feb 15, 2013 at 16:08

epascarello · Accepted Answer · 2013-02-15 16:05:25Z

1

Do not use new Function.

You are having problems because when the string is being built, the array is being turned into a string.

basic idea to get around the toString()

for (i=0;i<tmpdropnumber;i++){
    var dv=document.getElementById(id+i);
    dv.style.cursor="pointer";
    (function(id, i){  
        dv.onmouseover = function(){ dropover(id,i); };
        dv.onmouseout = function(){ dropout(id,i); };
        dv.onclick = function(){ dropclick(id,i, tmparray1, tmparray2); };
    })(id,i);
}

But in reality there is no need to pass in an object, id.

You can always use this to get the current row and there is rowIndex on the table. Heck you can have one event handler on the table and use handlers on the table/tbody to capture the bubbling and use target/srcElement.

answered Feb 15, 2013 at 16:05

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

4 Comments

Kage Over a year ago

sorry. didn't explain - I'm not actually using a table. I know how to get row references for that. I need pixel perfect precision so am building a table like structure from divs

Kage Over a year ago

Thanks for this - looks like it is exactly what I need. I don't really understand anonymous function wrappers. Why are my variables id and i referenced after function and at the end but not the arrays?

epascarello Over a year ago

The function that is wrapped around the event handlers forces i to not hold a reference, but rather use the value. The id probably does not have to be there either.

Kage Over a year ago

Id is just a variable ref to my div. don't think it needs to be there either. Thanks for your help

Amberlamps · Accepted Answer · 2013-02-15 16:03:25Z

1

Instead of

dv.onclick = new Function('dropclick'+"('" + id + "','" + i + "','"+tmparray1+"','"+tmparray2+"')");

try

dv.onclick = function() {
    dropclick(id, i, tmparray1, tmparray2);
};

Edit

Wrap your declaration in a anonymous function:

(function(id, i) {
    dv.onclick = function() {
        dropclick(id, i, tmparray1, tmparray2);
    };
} (id, i));

answered Feb 15, 2013 at 16:03

Amberlamps

40.7k6 gold badges46 silver badges54 bronze badges

2 Comments

Kage Over a year ago

This doesn't pick up the correct reference to i at run time. i is always shown at it's last value.

Kage Over a year ago

Loving the look of that - will try and let you know

Collectives™ on Stack Overflow

Need to pass local array to a function on click

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related