Concatenating javascript functions?

Question

If I have 300 functions like this:

function name1() {
  alert("1");
}

function name2() {
  alert("2");
}

function name3() {
  alert("3");
}

Etc all the way to 300, how could I concatenate these all into one function because they are so similar even though each one does have slight differences?

UPDATE:

Sorry, I used example functions because I didn't think it would matter to put my long code in the question, but I think it does matter now, here are the real functions:

function event() {
    //paths
    var path = document.querySelector('#container #path'); 
    var length = path.getTotalLength(); 
    console.log(path.getTotalLength()); 
    // Clear any previous transition
    path.style.transition = path.style.WebkitTransition =
      'none';
    // Set up the starting positions
    path.style.strokeDasharray = length + ' ' + length;
    path.style.strokeDashoffset = length;
    // Trigger a layout so styles are calculated & the browser
    // picks up the starting position before animating
    path.getBoundingClientRect();
    // Define our transition
    path.style.transition = path.style.WebkitTransition =
      'stroke-dashoffset 0.4s linear';
    // Go!
    path.style.strokeDashoffset = '0';

    document.getElementById("container").style.visibility = "visible";
};

function event2() {
    //paths
    var path2 = document.querySelector('#container2 #path_2');
    var length = path2.getTotalLength();
    console.log(path2.getTotalLength());
    // Clear any previous transition
    path2.style.transition = path2.style.WebkitTransition =
      'none';
    // Set up the starting positions
    path2.style.strokeDasharray = length + ' ' + length;
    path2.style.strokeDashoffset = length;
    // Trigger a layout so styles are calculated & the browser
    // picks up the starting position before animating
    path2.getBoundingClientRect();
    // Define our transition
    path2.style.transition = path2.style.WebkitTransition =
      'stroke-dashoffset 0.45s linear';
    // Go!
    path2.style.strokeDashoffset = '0';

    document.getElementById("container2").style.visibility = "visible";
};

function event3() {
    //paths
    var path3 = document.querySelector('#container3 #path_3');
    var length = path3.getTotalLength();
    console.log(path3.getTotalLength());
    // Clear any previous transition
    path3.style.transition = path3.style.WebkitTransition =
      'none';
    // Set up the starting positions
    path3.style.strokeDasharray = length + ' ' + length;
    path3.style.strokeDashoffset = length;
    // Trigger a layout so styles are calculated & the browser
    // picks up the starting position before animating
    path3.getBoundingClientRect();
    // Define our transition
    path3.style.transition = path3.style.WebkitTransition =
      'stroke-dashoffset 0.4s linear';
    // Go!
    path3.style.strokeDashoffset = '0';

    document.getElementById("container3").style.visibility = "visible";
};


window.setTimeout(function() {
    event();
}, 1);

window.setTimeout(function() {
    event2();
}, 550);

window.setTimeout(function() {
    event3();
}, 1100);

So I would have to make changes to them, but the majority of it is the same, so how would I do it given this code? Thanks a lot.

if you really need to make individual functions, which I'm assuming you don't, you could use eval() in a loop, but I would use a parameter instead — zgr024
– zgr024, Commented Nov 7, 2014 at 17:32

Magicprog.fr · Accepted Answer · 2014-11-07 17:31:24Z

2

Create a function with a param :

function name(myNumber) {
  alert(myNumber);
}
name(1);
name(2);
name(3);

answered Nov 7, 2014 at 17:31

Magicprog.fr

4,1204 gold badges29 silver badges35 bronze badges

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

Comments

Sterling Archer · Accepted Answer · 2014-11-07 17:31:38Z

2

Use a loop and a parameter

function name(x) {
    alert(x);
}

for (var i = 1; i <=300; i++) {
    name(i);
}

answered Nov 7, 2014 at 17:31

Sterling Archer

22.5k19 gold badges86 silver badges121 bronze badges

Comments

ntzm · Accepted Answer · 2014-11-07 17:32:18Z

2

Use a parameter with your function:

function name(number) {
  alert(number);
}

So you could call it with name(1), name(2), name(3), etc.

If you wanted to do this for every number from 1 to 300, you would use a for loop:

for (var i = 0; i <= 300; i++) {
  name(i);
}

If you want to start at 1, just change var i = 0 to var i = 1.

answered Nov 7, 2014 at 17:32

ntzm

4,8592 gold badges34 silver badges39 bronze badges

Comments

nicael · Accepted Answer · 2014-11-07 17:31:31Z

1

You are calling them at some point, right? So why not just make this function:

function name(i) {
  alert(i);
}

And call it with name(1), name(2), name(3), etc

answered Nov 7, 2014 at 17:31

nicael

19.1k13 gold badges65 silver badges93 bronze badges

Collectives™ on Stack Overflow

Concatenating javascript functions?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related