How to run an array of function inside an array variable

Question

I'm trying to run series of functions i placed on a variable.

Here's a (demo)

Code:

function pass_me(x) {
    alert(x);        
};

var colors = new Array();
var colors = ["pass_me('yellow');", "pass_me('green');", "pass_me('blue');"]

for(var i = 0; i <= colors.length; i++) {
    window[colors[i]]();
}

unfortunately, I can't make it run. Any idea what's wrong in my code?

Thanks

The story behind the array variable of function, is because i copied it from a dynamic element. This way it will only run what function is already in the page. So if pass_me("red") is not present, it will not be run.

Example:

<img src="img/something.jpg" ondblclick="pass_me("yellow")" />
<img src="img/something.jpg" ondblclick="pass_me("green")" />
<img src="img/something.jpg" ondblclick="pass_me("blue")" />

then I just use:

jQuery("td img").each(function(){
colors.push(jQuery(this).attr("ondblclick"));
})

for one, "pass_me('yellow');" is a string, you'll have to either eval it or parse it out. — user400654
– user400654, Commented Nov 17, 2012 at 4:41
The first var colors is unnecessary - it just gets overwritten when you create a new array on the next line. — Dennis
– Dennis, Commented Nov 17, 2012 at 4:56

Rikki · Accepted Answer · 2012-11-17 07:33:22Z

1

Either change the array members to a handler like this:

function pass_me(x) {
    alert(x);        
};

var colors = [{ handler: pass_me, args: ['yellow'] }, { handler: pass_me, args: ['green'] }, { handler: pass_me, args: ['blue'] }];

for(var i = 0; i < colors.length; i++) {
    colors[i].handler.apply(this, colors[i].args);
};

This way you can have multiple handlers in the same array with different parameters per each handler. Or initialize the members before calling them because data type of the members is string, not Function. like this:

function pass_me(x) {
    alert(x);        
};

var colors = ["pass_me('yellow')", "pass_me('green')", "pass_me('blue')"];

for(var i = 0; i < colors.length; i++) {
    eval(colors[i]);
};

Hope it helps you.

Cheers

edited Nov 17, 2012 at 7:33

answered Nov 17, 2012 at 5:00

Rikki

3,5681 gold badge25 silver badges34 bronze badges

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

10 Comments

Pennf0lio Over a year ago

I like the 2nd one using eval, but it seem it just run the first function and doesn't run the others. any idea?

Pennf0lio Over a year ago

this works like a charm. I changed eval(colors[i])(); - to -> eval(colors[i]);

Felix Kling Over a year ago

Both of your solutions are full of errors, both syntactically and logically! -1 @Pennf0lio: You really should not accept incorrect answers.

Pennf0lio Over a year ago

@FelixKling It would be hard for me to determine which codes are semantic and which are not. I just selected Mohammad's answer as it addresses my problem and it works for me. I understand your concern that this community needs to have a quality codes and i have nothing against that :) thank you.

Ankur Over a year ago

@MohammadGoudarzi it still has errors change i <= colors.length to i < colors.length, and also your first solution is totally wrong

|

jfriend00 · Accepted Answer · 2012-11-17 04:43:40Z

1

If you want to execute a string of javascript, you would have to use eval to tell javascript to parse your string into javascript. That is generally not the best way to write javascript.

To avoid using eval, I'd suggest this:

function pass_me(x) {
    alert(x);        
};

var colors = ["yellow", "green", "blue"];

for(var i = 0; i <= colors.length; i++) {
    pass_me(colors[i]);
}

Or, if you really want to put the function in the array so you could have different functions in the array, you can do this:

function pass_me(x) {
    alert(x);        
};

var colors = [{fn:pass_me, color: "yellow"}, {fn:pass_me, color: "green"}, {fn:pass_me, color: "blue"}];

for(var i = 0; i <= colors.length; i++) {
    colors[i].fn(colors[i].color);
}

answered Nov 17, 2012 at 4:43

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

6 Comments

Pennf0lio Over a year ago

I can't do this way because my approach in getting the variable was a little different. but thanks :)

jfriend00 Over a year ago

@Pennf0lio - Then, clarify what your question really is, please. There's no reason to embed javascript string function calls into an array when you could do it so many better ways. You just haven't included enough info for us to know what ways are acceptable.

Pennf0lio Over a year ago

Apologize I didn't explain how i derive my variable. but now I just edited and added the details how i did it. What my approach was, I just copy the existing function being called from the "ondblclick" attribute of the image

Pennf0lio Over a year ago

The page is dynamic and it generates unique color each time, so the way to figure out what color is present on the page, I just copied what "pass_me('colors')" is already existing instead of running a functions with fix color values.

jfriend00 Over a year ago

@Pennf0lio - well, we could have all helped in a much more directed way if you just showed the real problem in your original question, but it looks like you've now picked an answer already so I guess we're done now.

|

Roko C. Buljan · Accepted Answer · 2012-11-17 04:49:52Z

1

demo

function pass_me(x) {
    alert(x);        
}

var colors = ["yellow", "green", "blue"];

for(i = 0; i < colors.length; i++) {
    pass_me(colors[i]);
}

answered Nov 17, 2012 at 4:49

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Comments

Felix Kling · Accepted Answer · 2012-11-17 07:13:08Z

1

It is probably safe to use eval here, but here is another solution, which I personally find a bit cleaner:

The event handlers are bound via HTML attributes. Most HTML attribute values are the basis for the corresponding DOM property value. In this case, each img DOM element has a property ondblclick with the function body being the value of the HTML attribute.

Meaning the HTML is equivalent to:

imgElement.ondblclick = function() {
    pass_me('yellow');
};

Hence, if you want to "collect" those functions, you just have to get a reference to the event handler:

var handlers = jQuery("td img").map(function(){
    return this.ondblclick;
}).get();

and call them later:

for(var i = 0, l = handlers.length; i < l; i++) {
    handlers[i]();
}

However if you just want to execute all the handlers without physically clicking on the images, you can just trigger an event on them:

jQuery("td img").trigger('dblclick');

This executes all event handlers for the dbclick event.

answered Nov 17, 2012 at 7:13

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

1 Comment

Pennf0lio Over a year ago

Yup, wow, thanks. this is more sophisticated approach compare to mine.

Ankur · Accepted Answer · 2012-11-17 04:41:40Z

0

you need to try

eval(colors[i]);

As it is a string not a function

answered Nov 17, 2012 at 4:41

Ankur

12.8k7 gold badges40 silver badges68 bronze badges

2 Comments

Pennf0lio Over a year ago

yes this works, but it seem to just run the first function and not the others. jsfiddle.net/fGaHR/9

Ankur Over a year ago

@Pennf0lio try eval(colors[i]); instead of eval(colors[i])();

Paul · Accepted Answer · 2012-11-17 04:46:55Z

0

Perhaps you are looking for anonymous functions:

function pass_me(x) {
    alert(x);        
}

var colors = [
    function(){ return pass_me('yellow'); }, 
    function(){ return pass_me('green'); },
    function(){ return pass_me('blue'); }
];

for(var i = 0; i < colors.length; i++){
    colors[i]();
}

answered Nov 17, 2012 at 4:46

Paul

142k28 gold badges285 silver badges272 bronze badges

Collectives™ on Stack Overflow

How to run an array of function inside an array variable

6 Answers 6

10 Comments

6 Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

10 Comments

6 Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related