Call Multiple JavaScript Functions in onclick Event

August 11, 2022 | by Arround The Web | No comments

Call Multiple JavaScript Functions in onclick Event

In JavaScript, the onclick event of the button is used to associate any JavaScript function with it. Whenever the user presses the button, the attached function will be triggered. JavaScript provides built-in features such as addevent listener and onclick events to execute multiple functions with a single click. This event supports all the famous web browsers. In this article, you will learn how to call multiple JavaScript functions with an onclick event.

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

<html>
<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.

Source: linuxhint.com