generate different function names in a loop with JavaScript

Question

I am trying to generate different names for the functions, such as realname1, realname2, realname3, etc. in this for loop.

for(i=0;i<data.results.length;i++) {
    pic = data.results[i].profile_image_url;
    var img = document.createElement("img");
    img.src=pic;
    img.width=50;
    img.height=50;
    img.addEventListener('click', realname, false); //here is the line where I want to change
    document.body.appendChild(img);
    username = data.results[i].from_user_name;
    username_array.push(username);
    text = data.results[i].text;
}

So... change `realname` to `realname1` or `realname2` or `realname3`? — Waleed Khan, Feb 08 '13 at 21:27
Why in the world do you need different function names? Sounds like a poor design. — epascarello, Feb 08 '13 at 21:29
possible duplicate of [Javascript closure inside loops - simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) or [infamous loop problem](http://stackoverflow.com/questions/1451009/javascript-infamous-loop-problem) — Bergi, Feb 08 '13 at 21:33
I agree with @epascarello. We don't know what your `realname()` functions are doing, but most likely, you will be better off passing your index as a parameter and handling it in one function. — MCL, Feb 08 '13 at 21:35

score 0 · Answer 1 · answered Feb 08 '13 at 21:30

0

img.addEventListener('click', 'realname_'+i+'()', false);

answered Feb 08 '13 at 21:30

amirali shahinpour

189
2
13

this answers the question (it's closest to what OP asked for), but it's horrible and incorrect - you cannot use `()` here unless you managed to define a function that has them brackets in its name. Which BTW is totally possible: `window['realname_1()'] = function(){...}` :D – naugtur Feb 08 '13 at 21:40

score 0 · Answer 2 · answered Feb 08 '13 at 21:31

0

Add an object like this outside your loop

var functionObj = {
  '1':realname1,
  '2':realname2
};

so that inside, you can do something like this..

img.addEventListener('click', functionObj[i], false);

EDIT : Typo.

answered Feb 08 '13 at 21:31

cowboybebop

2,225
3
21
31

score 0 · Answer 3 · answered Feb 08 '13 at 21:35

Ideally, you would want to make a single more generic function which you would pass a parameter, rather than having multiple functions. Without seeing what the functions do however, I cannot suggest one specifically.

As far as doing what you are attempting to do, this depends on how the functions are defined. If these are global functions (hopefully not), then something like this would work:

img.addEventListener('click', window["realname"+i], false);

Slightly better would be if the functions are within a common object:

var someobj = {
    realname1 : function(){...},
    realname2...
}

in which case you would do it like this:

img.addEventListener('click', someobj["realname" + i], false);

score 0 · Answer 4 · answered Feb 08 '13 at 21:37

Your question is a bit ambiguous, but I think I can guess what you are trying to do. And You're not doing it the javascript way :)

You should know that you can assign functions to variables, so instead of creating lots of functions under lots of names, you can just manage them in a loop.

var somefunctionIjustDid = function(a){ return a+1; }
somefunctionIjustDid(3); //returns 4

And the second thing you want to learn is some basics of javascript scopes. If you want to make a function to handle click and bind that to different things in a loop - it's something like that:

for(var i=...){

someNode.addEventListener('click',(function(){
  var store_i_for_later = i;
  return function(){
    //this here handles the event and has the current i value of the loop execution in store_i_for_later 
  }
})(),false)

}

This mechanism is called closure, I recommend some reading.

And after all that - you probably don't need that loop at all if you use jQuery.on with delegation http://api.jquery.com/on/ with selector as second argument. Or you can implement this yourself, without jQUery, but that's another story.

generate different function names in a loop with JavaScript

4 Answers4