Call two functions from same onclick

JavascriptHtmlOnclick

Javascript Problem Overview


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!

Javascript Solutions


Solution 1 - Javascript

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

Solution 2 - Javascript

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();"/>

Solution 3 - Javascript

You can call the functions from inside another function

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

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

Solution 4 - Javascript

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;"

Solution 5 - Javascript

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

document.getElementById('btn').addEventListener('click', function(){
    pay();
    cls();
});

Solution 6 - Javascript

With jQuery :

jQuery("#btn").on("click",function(event){
    event.preventDefault();
    pay();
    cls();
});

Solution 7 - Javascript

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

Solution 8 - Javascript

Try this

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

Solution 9 - Javascript

put a semicolon between the two functions as statement terminator.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser182View Question on Stackoverflow
Solution 1 - JavascriptChris BierView Answer on Stackoverflow
Solution 2 - JavascriptGeeky GuyView Answer on Stackoverflow
Solution 3 - JavascriptpollirrataView Answer on Stackoverflow
Solution 4 - JavascriptAmine HajyoussefView Answer on Stackoverflow
Solution 5 - JavascriptkaraxunaView Answer on Stackoverflow
Solution 6 - JavascriptLucien BaronView Answer on Stackoverflow
Solution 7 - JavascriptelclanrsView Answer on Stackoverflow
Solution 8 - JavascriptSachinView Answer on Stackoverflow
Solution 9 - Javascriptpk2218View Answer on Stackoverflow