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:

Table of Content

Calling all functions at once
Calling a Single Function That Calls Other Functions

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 event

Approach 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

How to get the title of an HTML page ?

PranchalKatiyar

Improve

Article Tags :

Call multiple JavaScript functions in onclick event

Approach 1: Calling all functions at once

Approach 2: Calling a Single Function That Calls Other Functions

Similar Reads

Thank You!

What kind of Experience do you want to share?