How to Call Multiple JavaScript Functions in a Single click Event?

To call multiple JavaScript functions in a single click event, separate each function call with a semicolon(;) within the onclick attribute of the element.

For example, if we have two functions function1() and function2() in our JavaScript file and we want to call both of them as soon as the button is clicked, we can add them within the onclick attribute of the button, separated with a semicolon(;):

<button onclick="function1();function2();">Click Me</button>

Let’s define both functions in our JavaScript file:

function function1(){
    alert('Function1 is called');
}

function function2(){
    alert('Function2 is called');
}

Below is the outcome of the above code:

Now you might ask yourself what would be the order of these function calls?

Actually, the order of calling multiple JavaScript functions within a single onclick event or function call depends on the order in which they are written.

In the above example, the function function1() is called first and the function function2() is called last. That’s because they are specified in this order inside the onclick event.

Alternatively, you can also define a new function that calls both functions and use it in the onclick attribute.

For example,

<button onclick="myFun()">Click Me</button>

Add the JavaScript:

function function1(){
    alert('Function1 is called');
}

function function2(){
    alert('Function2 is called');
}

function myFun(){
    // Call multiple functions here
    function1();
    function2();
}

Below is the outcome:

In this example, when the button is clicked, the myFun() function is called, which in turn calls both function1() and function2() in the order they are called within myFun().

2. Call Multiple Functions using the addEventListener() Method

Although adding function calls directly within the onclick attribute lets you easily call multiple JavaScript functions on click event, still this method is not recommended.

You should always avoid adding JavaScript code directly inside HTML elements.

Instead, you can use the addEventListener() method inside your JavaScript file to register multiple functions with click events.

For example, let’s say we have a button inside our HTML file with an id="myBtn". We want to call two functions function1() and function2() as soon as this button is clicked.

<button id="myBtn">Click Me</button>

Register each function with the button’s click event inside the JavaScript file:

function function1(){
    alert('This is function 1');
}

function function2(){
    alert('This is function 2');
}

// Get a reference to the button
const btn = document.getElementById('myBtn');

// Register functions with click event
btn.addEventListener('click', function1);
btn.addEventListener('click', function2);

Below is the outcome of the above code:

You can attach as many functions as you want with the button’s click event using the addEventListener() method.

The order of the function calls will be the same as the order in which the click event is registered.

That’s all for this article. Thanks for reading!