26

How to call two methods on button's onclick method in HTML or JavaScript ?

Ripon Al Wasim
  • 36,924
  • 42
  • 155
  • 176
Nirav Jain
  • 5,088
  • 5
  • 40
  • 61

5 Answers5

46

  1. Try this:

    <input type="button" onclick="function1();function2();" value="Call2Functions" />

  2. Or, call second function at the end of first function:

       function func1(){
     //--- some logic
     func2();
   }

   function func2(){
    //--- some logic
   }

    ...and call func1() onclick of button:

    <input type="button" onclick="func1();" value="Call2Functions" />
Mogsdad
  • 44,709
  • 21
  • 151
  • 275
Harry Joy
  • 58,650
  • 30
  • 162
  • 207
20

As stated by Harry Joy, you can do it on the onclick attr like so:

<input type="button" onclick="func1();func2();" value="Call2Functions" />

Or, in your JS like so:

document.getElementById( 'Call2Functions' ).onclick = function()
{
    func1();
    func2();
};

Or, if you are assigning an onclick programmatically, and aren't sure if a previous onclick existed (and don't want to overwrite it):

var Call2FunctionsEle = document.getElementById( 'Call2Functions' ),
    func1 = Call2FunctionsEle.onclick;

Call2FunctionsEle.onclick = function()
{
    if( typeof func1 === 'function' )
    {
        func1();
    }
    func2();
};

If you need the functions run in scope of the element which was clicked, a simple use of apply could be made:

document.getElementById( 'Call2Functions' ).onclick = function()
{
    func1.apply( this, arguments );
    func2.apply( this, arguments );
};
JAAulde
  • 19,250
  • 5
  • 52
  • 63
10

The modern event handling method:

element.addEventListener('click', startDragDrop, false);
element.addEventListener('click', spyOnUser, false);

The first argument is the event, the second is the function and the third specifies whether to allow event bubbling.

From QuirksMode:

W3C’s DOM Level 2 Event specification pays careful attention to the problems of the traditional model. It offers a simple way to register as many event handlers as you like for the same event on one element.

The key to the W3C event registration model is the method addEventListener(). You give it three arguments: the event type, the function to be executed and a boolean (true or false) that I’ll explain later on. To register our well known doSomething() function to the onclick of an element you do:

Full details here: http://www.quirksmode.org/js/events_advanced.html

Using jQuery

if you're using jQuery, there is a nice API for event handling:

$('#myElement').bind('click', function() { doStuff(); });
$('#myElement').bind('click', function() { doMoreStuff(); });
$('#myElement').bind('click', doEvenMoreStuff);

Full details here: http://api.jquery.com/category/events/

Community
  • 1
  • 1
Nathan Ridley
  • 33,766
  • 35
  • 123
  • 197
  • I can never remember in this model, is the code you showed fully cross browser compatible, or are there concerns to consider in that regard? **EDIT:** based on your edit, I'll add that I can never remember the addEventListener model, and implications thereof, because I always use jQuery. – JAAulde May 04 '11 at 11:07
  • 1
    There are caveats of course when you look at older browsers, but if you use jQuery to handle it, you're pretty safe. – Nathan Ridley May 04 '11 at 11:09
2
<input type="button" onclick="functionA();functionB();" />

function functionA()
{

}

function functionB()
{

}
Arrabi
  • 3,718
  • 4
  • 26
  • 38
1

Hi,

You can also do as like below... In this way, your both functions should call and if both functions return true then it will return true else return false.

<input type="button" 
     onclick="var valFunc1 = func1(); var valFunc2 = func2(); if(valFunc1 == true && valFunc2 ==true) {return true;} else{return false;}" 
     value="Call2Functions" />

Thank you, Vishal Patel

Vishal Patel
  • 953
  • 5
  • 11