Call multiple JavaScript functions in onclick event
Last Updated :
12 Sep, 2024
Calling multiple JavaScript functions in an onclick event means executing several functions sequentially when a user clicks an element, like a button. This approach allows you to trigger multiple actions or behaviors with a single click, enhancing interactivity and functionality in web applications.
Below are the approaches to calling multiple JavaScript functions in onclick event:
Approach 1: Calling all functions at once
The Calling all functions at once approach involves listing multiple function names in the onclick attribute, separated by semicolons (;). When the element is clicked, each function is executed in the order they are listed, allowing multiple actions in one click.
Example 1: This example we Clicking the button calls GFG_Fun_1() and GFG_Fun_2(). GFG_Fun_1() updates the first paragraph, while GFG_Fun_2() updates the second, demonstrating multiple function calls on click.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Call multiple JavaScript functions
in onclick event
</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="GFG_UP">
</p>
<button onclick="GFG_Fun_1(); GFG_Fun_2()">
click here
</button>
<p id="GFG_DOWN_1">
<p id="GFG_DOWN_2">
</p>
<script>
let up = document.getElementById('GFG_UP');
up.innerHTML =
'Click on the button to call multiple functions';
let down_1 = document.getElementById('GFG_DOWN_1');
let down_2 = document.getElementById('GFG_DOWN_2');
function GFG_Fun_1() {
down_1.innerHTML = 'From function 1';
}
function GFG_Fun_2() {
down_2.innerHTML = 'From function 2';
}
</script>
</body>
</html>
Output:
Call multiple JavaScript functions in onclick eventApproach 2: Calling a Single Function That Calls Other Functions
The Calling a Single Function That Calls Other Functions approach involves invoking one main function in the onclick attribute. This main function then sequentially calls other functions within its body, centralizing the function calls and simplifying event handling for multiple actions.
Example 1: This example we Clicking the button triggers GFG_Fun(), which sequentially calls GFG_Fun_1() and GFG_Fun_2(). GFG_Fun_1() updates one paragraph, while GFG_Fun_2() updates another.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Call multiple JavaScript functions
in onclick event
</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="GFG_UP">
</p>
<button onclick="GFG_Fun(); ">
click here
</button>
<p id="GFG_DOWN_1">
<p id="GFG_DOWN_2">
</p>
<script>
let up = document.getElementById('GFG_UP');
up.innerHTML =
'Click on the button to call multiple functions';
let down_1 = document.getElementById('GFG_DOWN_1');
let down_2 = document.getElementById('GFG_DOWN_2');
function GFG_Fun() {
GFG_Fun_1();
GFG_Fun_2();
}
function GFG_Fun_1() {
down_1.innerHTML = 'From function 1';
}
function GFG_Fun_2() {
down_2.innerHTML = 'From function 2';
}
</script>
</body>
</html>
Output:
Call multiple JavaScript functions in onclick event
Similar Reads
How to Call a JavaScript Function using an onsubmit Event ? HTML has a form element that is used to get the data from the user and send the data to the server. Before the HTML form sends data to the server, it generates an event called "submit". This event can be utilized to execute a JavaScript function that can either validate the form data or notify the u
3 min read
How to Call a JavaScript Function from an onmouseout Event ? The onmouseout event in JavaScript triggers when the mouse pointer leaves an element. This event is commonly used in web development to execute certain functions when a user moves the mouse away from a specific area on the webpage. Below are the approaches to call a JavaScript function from an onmou
3 min read
How to call JavaScript function in HTML ? In HTML, you can easily call JavaScript functions using event attributes like onclick and onload. Just reference the function name within these attributes to trigger it. You can also call functions directly within script blocks using standard JavaScript syntax. Let's create an HTML structure with so
2 min read
How to Call a JavaScript Function from an onsubmit Event ? The onsubmit event attribute in HTML is triggered when a form is submitted. It is also useful for validating form data or performing actions before any submission and ensures better control and validation of user inputs before data is sent. The below methods can be used to call a JavaScript function
2 min read
How to call a JavaScript Function from an onmouseover Event ? The onmouseover event in JavaScript is triggered when the mouse pointer moves onto an element, such as a button, image, or text. We will see how to call JavaScript function from an onmouseover event in various ways, like using the onmouseover Attribute and Using Event Listener. Table of Content Usin
2 min read
All about Functions and Scopes in JavaScript In this article, we will cover all the basic concepts of JS functions, callbacks, scopes, closures in-depth which would help you to - understand different types of function declarations.make better use of functions.understand how different scopes and scope chain works in JS.learn about closures and
10 min read