How to call Two Function onClick in JavaScript? (3 Easy Steps)

Do you want to know How to call Two Function onClick in JavaScript?

If you have a website and want to call two or more functions when a button is clicked, you can use this simple JavaScript function.

If you’re new to JavaScript and unsure how to do it correctly, follow these three simple steps.

Use Cases for Calling Multiple Functions on Click in JavaScript

There are multiple use cases for executing multiple functions when a user clicks a button. Here are some examples:

1. Form Validation & Submission

If you have an HTML form and want to validate it before submitting data to the database, you can use the method to execute two or more functions onClick in JavaScript.

2. Updating UI & Logging Action

If you want to update the webpage UI when a user clicks a button, such as changing text and logging the action simultaneously, this method will be very useful for you.

3. Toggle Dark Mode & Save Preference

Another great example of calling two functions is enabling dark mode while simultaneously saving the user’s preference in localStorage.

4. Analytics Tracking & Navigation

This method can also be used to track user interactions before redirecting them to a new page or another site.

Similarly, there are many use cases for calling two or more functions simultaneously in JavaScript.

Follow the simple steps mentioned below in this blog post to implement this method on your website.

How to call Two Function onClick in JavaScript?

Step 1: Create the HTML Structure

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

First, add a element in your HTML file where you want to call the functions when it is clicked.

Now, add the id attribute to the element so you can select it in JavaScript, just like in the example.

Also See: How to call a function after setTimeout in JavaScript? (5 Simple Methods)

Step 2: Define the Functions to be Called

function firstFunction() {
            alert("First function called!");
}

function secondFunction() {
            alert("Second function called!");
}

In the second step, I created two functions that will run when the button is clicked.

For this example, I’ve kept it simple. Both functions contain an alert method with text inside, so I can see when each function runs.

But in your case, you can write the code inside the function as needed, and it will run without any issues.

Step 3: Attach Multiple Functions to the Click Event

document.getElementById("myButton").addEventListener("click", function() {
            firstFunction();
            secondFunction();
});

Now, select the button element in the JavaScript section to attach the functions to.

You can use any method to do this. I used getElementById because I added an id attribute to the button, but you can also use querySelector.

Now, add addEventListener to the selected button, set the event type to click, then create a simple function that calls the two functions when the button is clicked.

If you click the HTML button, you will see that both functions work fine without any issues.

Conclusion

If you follow the steps mentioned in this blog post, you can easily run two or more functions onClick using JavaScript.

If you liked this post, you might also be interested in How to Call JavaScript Function on Button Click in HTML? (5 Simple Methods), How to Take user Input in JavaScript without Prompt? (4 Simple Methods), or How to Validate Form in JavaScript Before Submit? [Simple Steps].

For more amazing tips and tutorials related to web development, subscribe to our SingleSyntax YouTube channel.

On this page