How do I loop a variable in the Javascript function call?

Question

I have the following loop for a series of similar click events in jQuery. Everything works fine except for the last line below with the comment. How can I make each loop iteration call these functions respectively: step1(), step2(), step3(), etc.?

for (i = 0; i < 7; i++) {

    $("#stepbox" + i).click(function(){
    $("#step" + i).show();                     
    $("#stepswrapper section").not("#step" + i).hide();
    $("#stepbox" + i).addClass("stepboxactive");
    $("#stepboxmain div").not("#stepbox" + i).removeClass("stepboxactive");
    step + i(); // I'm stuck here. This doesn't work to create the function calls step1(), step2(), etc.
    });

}

Are step1 step2 step3 functions global? If so you can do `window['step' + i]()` — thinklinux, Apr 07 '15 at 22:40
At the very least, put the functions into an array. But why do you need to dynamically call a function like this? — Matt Ball, Apr 07 '15 at 22:40
possible duplicate of [How to execute a JavaScript function when I have its name as a string](http://stackoverflow.com/questions/359788/how-to-execute-a-javascript-function-when-i-have-its-name-as-a-string) — β.εηοιτ.βε, Apr 07 '15 at 22:42
@Legends passing a string to setTimeout is exacly the same as calling eval(). — Aleuck, Apr 07 '15 at 22:48
@Legends this means you are calling the javascript compiler, which is very slow. — Aleuck, Apr 07 '15 at 23:53
@Legends making an array of functions: `funcArray[0]()` , `funcArray[1]()` — Aleuck, Apr 07 '15 at 23:57
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/74670/discussion-between-legends-and-aleuck). — Legends, Apr 08 '15 at 00:02

score 2 · Answer 1 · answered Apr 07 '15 at 22:40

2

Assuming your functions are defined in the global context:

for (i = 0; i < 7; i++) {

    $("#stepbox" + i).click(function(){
        $("#step" + i).show();                     
        $("#stepswrapper section").not("#step" + i).hide();
        $("#stepbox" + i).addClass("stepboxactive");
        $("#stepboxmain div").not("#stepbox" + i).removeClass("stepboxactive");
        window["step" + i]();
    });
}

answered Apr 07 '15 at 22:40

Dave

10,748
3
43
54

2

Sure, this might work. But needing to do so at all is a major code smell. – Matt Ball Apr 07 '15 at 22:41
Uuuu I can smell it from here :D – Legends Apr 07 '15 at 22:42

score 1 · Answer 2 · answered Apr 08 '15 at 00:04

1

make an array of the step functions.

var step = [
  function () { /* step 0 */ },
  function () { /* step 1 */ },
  function () { /* step 2 */ }
  // ...
];
for (i = 0; i < 7; i++) {
    $("#stepbox" + i).click(function(){
        $("#step" + i).show();                     
        $("#stepswrapper section").not("#step" + i).hide();
        $("#stepbox" + i).addClass("stepboxactive");
        $("#stepboxmain div").not("#stepbox" + i).removeClass("stepboxactive");
        step[i]();
    });
}

answered Apr 08 '15 at 00:04

Aleuck

294
1
12

@dave I tried both approaches but they didn't work. Here's how my code is structured: $(document).ready(function(){ $("#stepbox1").click(function(){ $("#step1").show(); $("#stepswrapper section").not("#step1").hide(); $("#stepbox1").addClass("stepboxactive"); $("#stepboxmain div").not("#stepbox1").removeClass("stepboxactive"); step1(); }); // ...Plus another three of these click functions. And then: function step1() { // Stuff here } // ...Plus another three of these functions called from the buttons }); – Dan Oliv Apr 11 '15 at 00:04

How do I loop a variable in the Javascript function call?

2 Answers2