Como chamar várias funções JavaScript no evento onclick

Para executar várias ações quando um usuário clica em um elemento, coloque várias instruções de chamada de função em um manipulador onclick em linha, registre callbacks separados com addEventListener, ou use && e || quando uma chamada posterior deve depender de uma condição. Escolha addEventListener para um código de página de fácil manutenção; manipuladores em linha são concisos para exemplos pequenos, e operadores lógicos são para chamadas condicionais.

Chamar várias funções a partir de um manipulador onclick em linha

Um manipulador em linha pode conter várias instruções JavaScript separadas por ponto e vírgula. As chamadas são executadas em ordem. Isso invoca cada função; não passa valores de função para o atributo.

Execute este exemplo:

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

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

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

handleClick();

Este exemplo autônomo demonstra a ordem das instruções. Em uma página, as mesmas chamadas podem ser colocadas no manipulador em linha de um botão:

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

O elemento deve estar presente na página, e ambas as funções nomeadas devem estar disponíveis quando o clique ocorrer. Se uma chamada lançar uma exceção não capturada, as instruções posteriores nesse mesmo manipulador não serão executadas. Trate os erros dentro de uma função se a próxima ação ainda precisar acontecer.

Registrar vários manipuladores de clique com addEventListener

Para o código da página, registre cada callback separadamente. O navegador invoca os ouvintes do clique na ordem de registro. Se um ouvinte lançar um erro, o despacho do evento relata esse erro, enquanto outros ouvintes registrados ainda são despachados; ouvintes separados não são uma promessa de que o trabalho assíncrono de um callback foi concluído antes de outro começar.

<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 precisa do mesmo tipo de evento, do mesmo objeto de função callback e da mesma configuração de captura usados no registro. Se você registrar uma função anônima e não mantiver uma referência a ela, não poderá passar esse mesmo objeto de função para removê-la depois. O HTML mantém o botão visível e o JavaScript no script da página; este exemplo de navegador não é um exemplo de saída de console.

Usar && e || para chamadas condicionais

Os operadores lógicos fazem curto-circuito: && avalia seu lado direito apenas quando o lado esquerdo é verdadeiro, enquanto || avalia seu lado direito apenas quando o lado esquerdo é falso. Isso é útil quando a segunda ação deve ser executada apenas sob essa condição, mas não registra vários ouvintes 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);

Aqui, fetchPageDetails é executada apenas quando isValidPage retorna um valor verdadeiro. Com ||, uma chamada de reserva pode ser executada quando a primeira expressão é falsa, por exemplo hasSavedValue() || loadDefaultValue(). Use && e || para execução condicional deliberada; use ouvintes separados quando cada callback registrado deve responder ao clique.