How to call multiple JavaScript functions in an onclick event?

javascript

event-handling

unobtrusive-javascript

code-readability

byNikita Barsukov·Nov 29, 2024

Catch multiple JavaScript functions in an onclick event by chaining them:

<button onclick="func1(); func2();">Click me!</button>

Or, bundle them in a single function:

function bundleFunctions() {
  func1();
  func2();
}

<button onclick="bundleFunctions();">Click me!</button>

Both methods lead to the same destination - firing several actions with a single click.

Inline JavaScript vs. External Event Handling

Using onclick within HTML is simple, but it intermingles JavaScript and HTML, which tends to create messy code. It's better practice to attach event handlers directly in your JavaScript:

// Spiderman is not the only one who can attach things to objects!
document.getElementById('yourButton').addEventListener('click', function() {
  func1();
  func2();
});

This approach adheres to unobtrusive JavaScript and promotes cleaner, more scalable code, separating HTML and JavaScript logic cleanly.

The Beauty of External Function Definition

To improve code readability, package your functions into a single external function:

// Masterchef here, cooking up a gourmet function!
function buttonClickEventHandler() {
  func1();
  func2();
}

Then hook it up with your button:

document.getElementById('yourButton').addEventListener('click', buttonClickEventHandler);

This approach simplifies debugging and code maintenance tasks.

Conditional Execution of Functions

For dynamic applications, you might want to execute functions conditionally:

function complexSequence() {
  if (weatherCondition === 'rainy') bringUmbrella();
  else if (weatherCondition === 'sunny') applySunscreen();
  // Add more sophisticated decision logic...
}
document.getElementById('yourButton').addEventListener('click', complexSequence);

This practice augments flexibility and control over your application's behavior. Be sure to put on your error-checking hat for enhanced robustness!

Using jQuery to handle multiple events

For jQuery fanatics, there's a way to bind multiple events:

// Magic jQuery spell coming right up!
$('#yourButton').bind('click', function() {
  func1();
  func2();
});

Be sure to identify your buttons with unique IDs and bring the jQuery library into the mix for a smoother event handling roller coaster ride.

Modular Approach: Breaking Down Actions

To make your code more adaptable and manageable, decompose your onclick event into modular functions:

// A symphony in code
function orchestrateActions() {
  strumLute();
  strokeViolin();
  blastTrumpet();
}

document.getElementById('yourButton').addEventListener('click', orchestrateActions);

Modular functions provide stellar benefits: they're easier to update, test, and reuse elsewhere in your application.

Dealing with Dynamically Added Elements

For elements birthed after the initial page load, use event delegation:

// Even in dynamic situations, JavaScript has your back!
document.addEventListener('click', function(event) {
  if (event.target.id === 'newBornButton') {
    func1();
    func2();
  }
});