0

I am trying to create functions with the same name as the buttons' ids

var a = ["ab1","aj6","yt5","gf5","js9"]
for (i = 0; i < a.length; i++) {
    var el = a[i];
    function el(){
        list.find(el);
    }
    $(function() {
        $("#"+el).click(el);
    }
}

When I do this, I get an

Uncaught TypeError: Cannot read property 'handler' of undefined on the anonymous function

. But when I change the function name to say "calculate" rather then the var el, it works fine. Any ideas?

Joseph
  • 117,725
  • 30
  • 181
  • 234
Dan
  • 8,263
  • 16
  • 51
  • 53
  • 5
    Both your function and your variable are called `el`. You use the same name for two different things. Also afaik, it is not clearly specified how function declarations inside blocks are handled. You should move the function declaration outside of the `for` loop or use a function expression. Apart form that, yes you can create functions in a loop, but there is a catch: [Javascript closure inside loops - simple practical example](http://stackoverflow.com/q/750486/218196) – Felix Kling Apr 15 '12 at 10:48
  • 1
    Why are you using the same name for a variable and a function? Horrible naming scheme. If you say it works when you change the function name, then you probably should! – Norm Apr 15 '12 at 10:50
  • is there a way to add a "character" to the end of the function name to make it different? Such as function ab1+0? I tried but it reads only the 0 as the name of the function – Dan Apr 15 '12 at 11:09
  • Why would you want to do that? If as workaround for the closure-loop-problem, then there are easier ways. Have a look at the link in my comment. – Felix Kling Apr 15 '12 at 11:12

4 Answers4

2

if you are trying to bind a click handler to each element with an "id" in the array, then:

var a = ["ab1","aj6","yt5","gf5","js9"]

$.each(a,function(i,val){               //for each item
    $("#"+val).on('click',function(){   //bind a click handler
        list.find(val);                 //that finds that element in "list"
    });

    //or

    $("#"+val).click(function(){ 
        list.find(val); 
    });

    //or

    $("#"+val).bind('click',function(){ 
        list.find(val); 
    });

    //or

    $('body').delegate('#'+val,'click',function(){ 
        list.find(val); 
    });
})
Joseph
  • 117,725
  • 30
  • 181
  • 234
1

I don't know, what you're trying to achieve, but "Yes , it is possible to create functions with array values":

var a = ["ab1","aj6","yt5","gf5","js9"];
for (var i = 0; i < a.length; i++) {        
    window[a[i]] = function(){
    };
}

After this, you have 5 global functions with "ab1","aj6","yt5","gf5","js9" names.

Engineer
  • 47,849
  • 12
  • 88
  • 91
0

You cannot have two variables with the same name. Both var el and function el are called el. JavaScript considers function names as variable names (sort of) where the function is assigned to.

Also, you should probably use a function statement instead of a function declaration. See http://kangax.github.com/nfe/ for more info.

Jani Hartikainen
  • 42,745
  • 10
  • 68
  • 86
-1

Do it is like this:

var a = ["ab1","aj6","yt5","gf5","js9"]
for (i = 0; i < a.length; i++) {
    var el = a[i];

    $("#"+el).click(functon(){
        list.find(el);
    });

}
yeahman
  • 2,737
  • 4
  • 21
  • 25
  • Apart from the typical closure problem with `el`, why would you put the call to `$()` *inside* the loop and not just around the whole piece? – Felix Kling Apr 15 '12 at 10:55
  • lol i just took the author's code and changed it.. haven't noticed the closure function – yeahman Apr 15 '12 at 11:06