How do you change a function name inside a for loop in javascript

Question

I want to change the function name inside of a for loop to something like this.

<script>
for (var x=1;x<10;x++){
function name_x(){
   code
}
</script>

So, 10 functions are produced with the names name_1, name_2 etc.

Thanks

Edit:

This is what I need a for loop around to create 5 functions id_1, id_2, id_3, id_4, id_5

<html>
<head>
<script>
function id_1(a){
var id = document.getElementById(a);
if (id.innerHTML==="innerHTML2"){
    id.innerHTML="innerHTML1";
}
else if (id.innerHTML==="innerHTML1"){
    id.innerHTML="innerHTML2";
}
}
</script>
</head>
<body>
<a id="id1" href="javascript:id_1('id')">innerHTML1</a>
<a id="id2" href="javascript:id_2('id')">innerHTML1</a>
<a id="id3" href="javascript:id_3('id')">innerHTML1</a>
<a id="id4" href="javascript:id_4('id')">innerHTML1</a>
<a id="id5" href="javascript:id_5('id')">innerHTML1</a>
</body>
</html>

Why do u wanna do this? What will you do after creating these 10 functions? — Nishanth Nair
– Nishanth Nair, Commented Mar 7, 2013 at 21:50
Generating lots of similarly-named function names seems to be a pretty strong code smell. Can you back up a little and explain the bigger picture of what you're trying to accomplish? There's probably a better way with, say, arrays. — mellamokb
– mellamokb, Commented Mar 7, 2013 at 21:50
Well, what I am trying to accomplish is this. When I click on a link, it corresponds to a function and I want each function to do something differently. So if I have 10 links, I want 10 functions. — user2145975
– user2145975, Commented Mar 7, 2013 at 21:54
@user2145975: If the 10 links do 10 completely different things, then give them 10 different sensible names corresponding to their behavior. If they are very similar and differ in a way that depends, say on the index number, then have all 10 links call the exact same function, and handle the differences with control flow logic and function arguments. For example, you can call handleLink(this) to pass a reference to the source link, and do slightly different processing based on which link was clicked. — mellamokb
– mellamokb, Commented Mar 7, 2013 at 21:55

Explosion Pills · Accepted Answer · 2013-03-07 21:51:47Z

3

This looks pretty nefarious, but if you're in a browser you could use window as the global object. Otherwise, define some object to house the methods:

var obj = {}, x;
for (x = 1; x < 10; x++) {
    obj['name_' + x]() { /* code */ }
}

Then you can call via obj.name_1() or obj['name_1']().

answered Mar 7, 2013 at 21:51

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

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

Comments

Zeta · Accepted Answer · 2013-03-07 22:00:20Z

3

You can create an array of functions instead:

var fs = [];
for (var x = 1; x < 10; x++){
    fs.push( function() {
       /* code */
    });
}
fs[1](); // call second function

You could use an object instead, but I wouldn't recommend it.

edited Mar 7, 2013 at 22:00

answered Mar 7, 2013 at 21:53

Zeta

106k13 gold badges205 silver badges249 bronze badges

3 Comments

mellamokb Over a year ago

+1 This is a good idea; but it is incorrect to say "No" to the question of whether the OP's request can be done, as @ExplosionPills has demonstrated.

Zeta Over a year ago

Removed the wrong statement. I forget sometimes that you can actually modify window for some interesting things.

Zeta Over a year ago

@user2145975: Add your tries (actual code!) to your question.

mellamokb · Accepted Answer · 2013-03-07 22:28:21Z

1

Since you have code that should apply directly to the link you clicked on, you can pass a reference to the link using this. Also, the javascript code will need to be placed in onclick, not href. If you need an href value to make it appear like a link, you can use #:

<a id="id1" href="#" onclick="javascript:swapContents(this);">innerHTML1</a>

Then you can use the argument passed in as a reference to the element (it is a good programming practice to use meaningful function names, so I've renamed the function to swapContents):

function swapContents(el){
    if (el.innerHTML === "innerHTML2"){
        el.innerHTML = "innerHTML1";
    } else if (el.innerHTML === "innerHTML1"){
        el.innerHTML = "innerHTML2";
    }
}

Also, all elements should have a unique id value according to the HTML spec. If you want them to be unified in some way, give them the same class or name, or a custom made-up attribute:

<a id="id1" class="id" href="#" onclick="javascript:swapContents(this);">innerHTML1</a>
<a id="id2" class="id" href="#" onclick="javascript:swapContents(this);">innerHTML1</a>
<a id="id3" class="id" href="#" onclick="javascript:swapContents(this);">innerHTML1</a>
<a id="id4" class="id" href="#" onclick="javascript:swapContents(this);">innerHTML1</a>
<a id="id5" class="id" href="#" onclick="javascript:swapContents(this);">innerHTML1</a>

Demo: http://jsfiddle.net/V6yG9/

edited Mar 7, 2013 at 22:28

answered Mar 7, 2013 at 22:22

mellamokb

56.8k12 gold badges111 silver badges138 bronze badges

3 Comments

user2145975 Over a year ago

this makes sense thank you, but what I if I don't want it to redirect the url (adding the #).

mellamokb Over a year ago

@user2145975: The # url has no effect, that's why it's generally used for javascript-only links. If you don't like that it adds # to the end of your current url, you can use href="javascript:;" instead, which is another no-op url: jsfiddle.net/V6yG9/1

user2145975 Over a year ago

What if I want to have each of those links do something differently? For instance $.get('code1.php') for one and $.get('code2.php') for another

Collectives™ on Stack Overflow

How do you change a function name inside a for loop in javascript

3 Answers 3

Comments

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related