Cómo llamar a varias funciones de JavaScript en el evento onclick

Para ejecutar varias acciones cuando un usuario hace clic en un elemento, ponga varias sentencias de llamada a funciones en un controlador onclick en línea, registre callbacks separados con addEventListener, o use && y || cuando una llamada posterior deba depender de una condición. Elija addEventListener para un código de página mantenible; los controladores en línea son concisos para ejemplos pequeños, y los operadores lógicos son para llamadas condicionales.

Llamar a varias funciones desde un controlador onclick en línea

Un controlador en línea puede contener varias sentencias de JavaScript separadas por punto y coma. Las llamadas se ejecutan en orden. Esto invoca cada función; no pasa valores de función al atributo.

Ejecute este ejemplo:

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

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

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

handleClick();

Este ejemplo independiente demuestra el orden de las sentencias. En una página, las mismas llamadas pueden colocarse en el controlador en línea de un botón:

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

El elemento debe estar presente en la página, y ambas funciones nombradas deben estar disponibles cuando ocurra el clic. Si una llamada lanza una excepción no capturada, las sentencias posteriores en ese mismo controlador no se ejecutan. Controle los errores dentro de una función si la siguiente acción aún debe realizarse.

Registrar varios controladores de clic con addEventListener

Para el código de página, registre cada callback por separado. El navegador invoca los listeners del clic en orden de registro. Si un listener lanza un error, el despacho del evento informa ese error, mientras que los demás listeners registrados aún se despachan; los listeners separados no son una promesa de que el trabajo asíncrono de un callback haya terminado antes de que comience otro.

<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 necesita el mismo tipo de evento, el mismo objeto de función callback y la misma configuración de captura usados para el registro. Si registra una función anónima y no conserva una referencia a ella, no podrá pasar ese mismo objeto de función para eliminarla más tarde. El HTML mantiene el botón visible y el JavaScript en el script de la página; este ejemplo de navegador no es un ejemplo de salida de consola.

Usar && y || para llamadas condicionales

Los operadores lógicos hacen cortocircuito: && evalúa su lado derecho solo cuando el lado izquierdo es verdadero, mientras que || evalúa su lado derecho solo cuando el lado izquierdo es falso. Esto es útil cuando la segunda acción debe ejecutarse solo bajo esa condición, pero no registra varios listeners de eventos.

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);

Aquí fetchPageDetails se ejecuta solo cuando isValidPage devuelve un valor verdadero. Con ||, una llamada de reserva puede ejecutarse cuando la primera expresión es falsa, por ejemplo hasSavedValue() || loadDefaultValue(). Use && y || para una ejecución condicional deliberada; use listeners separados cuando cada callback registrado deba responder al clic.