How to Call Multiple JavaScript Functions With an onclick Event?
The onclick event executes multiple methods in sequential order with a single click and supports multiple browsers. The onclick event makes the script clear and understandable by separating the functions with a semicolon for the users. The following example refers to the practical implementation of the onclick event.
Example
An example is provided of calling multiple functions by using the onclick event in JavaScript. For this purpose, the code is written as below:
Code
<head>
<h2>An example of using multiple methods by onclick event </h2>
<script>
// An example of using multiple methods by onclick event
document.write("<br>");
function method1() {
document.write ("First Method is called");
document.write("<br>");
document.write ("Welcome to JavaScript World");
document.write("<br>");
document.write("<br>");
}
function method2() {
document.write ("Second Method is called");
document.write("<br>");
document.write (" Welcome to Linuxhint");
}
</script>
</head>
<body>
<p>Press magic button to call the multiple functions</p>
<form>
<input type="button" onclick = "method1(); method2()" value = "Press the Magic Button" >
</form>
</body>
</html>
The description of the code is as follows:
-
- Two functions named method1() and method2() are defined that are to be called after the onclick event.
- After that, a button is created using the <form> tag.
- On the onclick event of the button, the methods method1() and method2() will be triggered.
Output
A button named “Press the Magic Button” is utilized to execute the multiple methods by its onclick event. After pressing the button, method1 and method2 are called to display the information present in it.
After pressing the button, two methods are called and display messages “Welcome to JavaScript World” and “Welcome to Linuxhint”.
Conclusion
In JavaScript, an onclick event is employed to call multiple functions with a single click. These functions are placed in the onclick event of the button type. This post demonstrates the usage of the onclick event to call multiple functions in JavaScript. For a better understanding, we have demonstrated an example that shows how multiple functions are called with a single click.
