Open In App

Call multiple JavaScript functions in onclick event

Improve
Improve
Like Article
Like
Save
Share
Report

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

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

Call multiple JavaScript functions in onclick event



Last Updated : 20 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads