How to Call Multiple JavaScript Functions in Onclick Event

To run several actions when a user clicks an element, put multiple function-call statements in an inline onclick handler, register separate callbacks with addEventListener, or use && and || when a later call should depend on a condition. Choose addEventListener for maintainable page code; inline handlers are concise for small examples, and logical operators are for conditional calls.

Call Multiple Functions from an Inline onclick Handler

An inline handler can contain several JavaScript statements separated by semicolons. The calls run in order. This invokes each function; it does not pass function values to the attribute.

Run this example:

function saveDraft() {
  console.log("Draft saved");
}

function showConfirmation() {
  console.log("Confirmation shown");
}

function handleClick() {
  saveDraft();
  showConfirmation();
}

handleClick();

This standalone example demonstrates the statement order. In a page, the same calls can be placed in a button’s inline handler:

<button type="button" onclick="saveDraft(); showConfirmation();">Save</button>

The element must be present in the page, and both named functions must be available when the click occurs. If a call throws an uncaught exception, later statements in that same handler do not run. Handle errors inside a function if the next action must still happen.

Register Multiple Click Handlers with addEventListener

For page code, register each callback separately. The browser invokes listeners for the click in registration order. If one listener throws, the event dispatch reports that error, while other registered listeners are still dispatched; separate listeners are not a promise that one callback’s asynchronous work has completed before another starts.

<button id="save" type="button">Save</button>
<script>
  const button = document.getElementById("save");

  function saveDraft() {
    console.log("Draft saved");
  }

  function showConfirmation() {
    console.log("Confirmation shown");
  }

  button.addEventListener("click", saveDraft);
  button.addEventListener("click", showConfirmation);

  // To remove a listener later, use the same callback reference:
  button.removeEventListener("click", showConfirmation);
</script>

removeEventListener needs the same event type, callback function object, and capture setting used for registration. If you register an anonymous function and do not keep a reference to it, you cannot pass that same function object to remove it later. The HTML keeps the button visible and the JavaScript in the page script; this browser example is not a console-output example.

Use && and || for Conditional Calls

Logical operators short-circuit: && evaluates its right side only when the left side is truthy, while || evaluates its right side only when the left side is falsy. This is useful when the second action should run only under that condition, but it does not register multiple event listeners.

function isValidPage(pageNumber) {
  return Number.isInteger(pageNumber) && pageNumber >= 1 && pageNumber <= 10;
}

function fetchPageDetails(pageNumber) {
  console.log(`Loading page ${pageNumber}`);
}

const pageNumber = 3;
isValidPage(pageNumber) && fetchPageDetails(pageNumber);

Here fetchPageDetails runs only when isValidPage returns a truthy value. With ||, a fallback call can run when the first expression is falsy, for example hasSavedValue() || loadDefaultValue(). Use && and || for deliberate conditional execution; use separate listeners when every registered callback should respond to the click.