How to call multiple buttons to do the same function in tweenmax?

Question

I am currently using tweenMax to do a website and I would like to ask if there is anyone know tweenmax are alble to do something like array which means with 1 simple line of code to call a few buttons to do a same function. Below are my current code which I need to copy and paste if new button added.

btn.onclick = function() {
    TweenMax.staggerTo([box4, box3, box2, box, box8, box7, box6, box5, box9, ], 1,  {right:"-25000", ease:Quad.easeIn}, 0.05);
};

btn2.onclick = function() {
    TweenMax.staggerTo([box4, box3, box2, box, box8, box7, box6, box5, box9, ], 1,  {right:"-25000", ease:Quad.easeIn}, 0.05);
};

btn3.onclick = function() {
    TweenMax.staggerTo([box4, box3, box2, box, box8, box7, box6, box5, box9, ], 1,  {right:"-25000", ease:Quad.easeIn}, 0.05);
};

Answer 1

Fusion's answer is correct and useful if you are using jQuery. If you'd like to avoid dependency on jQuery, then assume you have an array of buttons such as var buttons = [btn, btn2, btn3] and a function:

function tweenClickHandler() {
  TweenMax.staggerTo([box4, box3, box2, box, box8, box7, box6, box5, box9, ], 1,  {right:"-25000", ease:Quad.easeIn}, 0.05);
};

you could attach tweenClickHandler to each element in buttons with:

buttons.forEach(function(button) {button.onclick = tweenClickHandler;});

Note that forEach won't work on IE < 9 natively, but can be added using the polyfill provided by the Mozilla Developers Network documentation here.

Answer 2

If using jQuery is okay for you, just use jQuery selector:

    $(btn,btn2,btn3).click(function() {
        TweenMax.staggerTo([box4, box3, box2, box, box8, box7, box6, box5, box9, ], 1,  {right:"-25000", ease:Quad.easeIn}, 0.05);
    });

jQuery selector Hint:

$("#firstbutton , #secondbutton , #thirdbutton") // Select buttons directly by ID

$(".buttons") // Select buttons by class.