153

HTML & JS

How do I call 2 functions from one onclick event? Here's my code

 <input id ="btn" type="button" value="click" onclick="pay() cls()"/>

the two functions being pay() and cls(). Thanks!

Joel
  • 5,618
  • 1
  • 20
  • 19
user182
  • 1,805
  • 5
  • 18
  • 18

9 Answers9

276

Add semi-colons ; to the end of the function calls in order for them both to work.

 <input id="btn" type="button" value="click" onclick="pay(); cls();"/>

I don't believe the last one is required but hey, might as well add it in for good measure.

Here is a good reference from SitePoint http://reference.sitepoint.com/html/event-attributes/onclick

Chris Bier
  • 14,183
  • 17
  • 67
  • 103
55

You can create a single function that calls both of those, and then use it in the event.

function myFunction(){
    pay();
    cls();
}

And then, for the button:

<input id="btn" type="button" value="click" onclick="myFunction();"/>
Geeky Guy
  • 9,229
  • 4
  • 42
  • 62
  • 3
    it can be done, but seems to me it is not so transparent or it could be named similar to something like funtion1_function2(), in a case that funcitons are not related. – Muflix Jul 19 '16 at 07:53
  • 1
    won't it have more overhead than just doing onclick="pay(); cls();" ? – Am33d May 16 '18 at 07:05
  • @Am33d an overload that translates as one cell in the stack and half a millisecond extra for processing. It is more than worth it for the gain in readability and easy of maintenance. Imagine that in the future you have to add three extra methods, with conditional logic. – Geeky Guy May 16 '18 at 10:40
21

You can call the functions from inside another function

<input id ="btn" type="button" value="click" onclick="todo()"/>

function todo(){
pay(); cls();
}
pollirrata
  • 5,188
  • 2
  • 32
  • 50
  • 11
    It's been more than a year since this answer, and only now I noticed we posted the same answer at almost the same time (but you beat me by a minute, so have my +1). – Geeky Guy Jul 15 '14 at 13:29
14
onclick="pay(); cls();"

however, if you're using a return statement in "pay" function the execution will stop and "cls" won't execute,

a workaround to this:

onclick="var temp = function1();function2(); return temp;"
Amine Hajyoussef
  • 4,381
  • 3
  • 22
  • 26
12

Binding events from html is NOT recommended. This is recommended way:

document.getElementById('btn').addEventListener('click', function(){
    pay();
    cls();
});
karaxuna
  • 26,752
  • 13
  • 82
  • 117
10

With jQuery : 

jQuery("#btn").on("click",function(event){
    event.preventDefault();
    pay();
    cls();
});
Lucien Baron
  • 115
  • 6
10

Just to offer some variety, the comma operator can be used too but some might say "noooooo!", but it works:

<input type="button" onclick="one(), two(), three(), four()"/>

http://jsbin.com/oqizir/1/edit

elclanrs
  • 92,861
  • 21
  • 134
  • 171
6

Try this

<input id ="btn" type="button" value="click" onclick="pay();cls()"/>
Sachin
  • 40,216
  • 7
  • 90
  • 102
6

put a semicolon between the two functions as statement terminator.

pk2218
  • 111
  • 2
  • 9