Passing an array of functions as a parameter

Question

Here's my code:

function test(e, f) {
    for (var i = 0; i < e.length; i++) {
        $('#clickme').append("<button id='op" + i + "'>" + e[i] + "</button>")
        $('#op' + i).click(function () {
            f[i]();
        })
    }
}


$(function postPunk() {
    var func1 = function () {
        alert('1');
    }
    var func2 = function () {
        alert('2');
    }
    var func3 = function () {
        alert('3');
    }
    test(['Option1', 'Option2', 'Option3'], [func1, func2, func3]);
})

The click events aren't calling the functions. If I place an alert test in the click event, it fires fine.

Any ideas why this isn't working? It seems to be a problem with passing the array of functions as a parameter. Is there a better way to do this?

didn't know ; was optional in javascript. You are missing them at line 6, and the last line. — huysentruitw
– huysentruitw, Commented Aug 17, 2012 at 18:12
Are you looking at it in a console? There's an error: TypeError: [3] is not a function "f"+[i](); — Jared Farrish
– Jared Farrish, Commented Aug 17, 2012 at 18:12
stackoverflow.com/questions/477700/array-functions-in-jquery Check the above question. This may help you. — Ramaraj Karuppusamy
– Ramaraj Karuppusamy, Commented Aug 17, 2012 at 18:15
There's more "missing" ; than that (each of the function expressions). They are "optional", but it is best not to leave them off. — Jared Farrish
– Jared Farrish, Commented Aug 17, 2012 at 18:17
@WouterH Explicit semicolons are optional in most places in JavaScript (for code that is already written cleanly with one-statement per line). This will not cause any problems with the above code. Look up "ASI" (Automatic Semicolon Insertion) for the rules. I write almost no semicolons in JavaScript; know the rules and be consistent. — user166390
– user166390, Commented Aug 17, 2012 at 18:21

Niet the Dark Absol · Accepted Answer · 2012-08-17 18:14:34Z

8

As with every other question of this type, i keeps on changing.

Instead, try this:

for( var i=0; i<e.length; i++) {
    (function(i) {
        // your code that depends on i not changing
    })(i);
}

answered Aug 17, 2012 at 18:14

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

1 Comment

Niet the Dark Absol Over a year ago

@JaredFarrish Nope, because f doesn't change like i does.

gen_Eric · Accepted Answer · 2012-08-17 18:14:49Z

4

This seems to be the classic JavaScript issue, where they all be the last value (or undefined since f[3] doesn't exist), since that's the value of i after the loop.

Try to pass the function reference directly to the click handler.

function test(e, f) {
    for (var i = 0; i < e.length; i++) {
        $('#clickme').append("<button id='op" + i + "'>" + e[i] + "</button>")
        $('#op' + i).click(f[i])
    }
}

Or, another solution is to make a function that returns a function. This will allow it to "close" around i.

function test(e, f) {
    var makeFunc = function(i) {
        return function() {
            f[i]();
        }
    };
    for (var i = 0; i < e.length; i++) {
        $('#clickme').append("<button id='op" + i + "'>" + e[i] + "</button>")
        $('#op' + i).click(makeFunc(i))
    }
}

answered Aug 17, 2012 at 18:14

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

1 Comment

Felix Kling Over a year ago

+1 For passing the function directly to .click. If i is not needed, this is the only sensible solution.

Guffa · Accepted Answer · 2012-08-17 18:19:49Z

1

The code in the callback function uses the value of i after the loop has ended, so it points to an index outside the array. You need a closure in the loop so that each iteration gets its own instance of the variable:

function test(e, f) {
  for (var i = 0; i < e.length; i++) {
    $('#clickme').append("<button id='op" + i + "'>" + e[i] + "</button>");
    (function(i){
      $('#op' + i).click(function () {
        f[i]();
      });
    })(i);
  }
}

answered Aug 17, 2012 at 18:19

Guffa

703k111 gold badges760 silver badges1k bronze badges

Comments

Felix Kling · Accepted Answer · 2012-08-17 18:33:07Z

0

Here's how I got it to work: http://jsfiddle.net/fH2Dk/3/

function test(e, f){    
     for(var i = 0; i < e.length; i++) {
         (function(i) {
            $('#clickme').append("<button id='op" + i + "'>" + e[i] + "</button>");
            $('#op' + i).click(function(){
                f[i]();
            });
        })(i);    
    }
}

edited Aug 17, 2012 at 18:33

Felix Kling

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

answered Aug 17, 2012 at 18:22

N. Taylor Mullen

18.3k6 gold badges51 silver badges73 bronze badges

Collectives™ on Stack Overflow

Passing an array of functions as a parameter

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related