Call multiple JavaScript functions in onclick event
Last Updated :
20 Dec, 2023
To Call multiple JavaScript functions in onclick event, we have different approaches. In this article, we are going to see how to call multiple JavaScript functions in onClick event.
Below are the approaches to calling multiple JavaScript functions in onclick event:
Approach 1: Calling all functions at once
In this approach we separate the function with semi-colon “;” and call them when the button is clicked.
Example 1: This example calls both functions by mentioning their names with the onclick event separated by semi-colon “;”.Â
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 event
Approach 2: Calling one function that contains remaining functions
In this approach we are calling a single function on button click, which subsequently calls other two function
Example 1: This example first calls a single function and now it is responsibility of that function to call the others. This example does the same.
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
Share your thoughts in the comments
Please Login to comment...