Comment appeler plusieurs fonctions JavaScript dans l'événement onclick

Pour exécuter plusieurs actions lorsqu’un utilisateur clique sur un élément, placez plusieurs instructions d’appel de fonction dans un gestionnaire onclick en ligne, enregistrez des callbacks séparés avec addEventListener, ou utilisez && et || lorsqu’un appel ultérieur doit dépendre d’une condition. Choisissez addEventListener pour un code de page maintenable ; les gestionnaires en ligne sont concis pour de petits exemples, et les opérateurs logiques sont destinés aux appels conditionnels.

Appeler plusieurs fonctions depuis un gestionnaire onclick en ligne

Un gestionnaire en ligne peut contenir plusieurs instructions JavaScript séparées par des points-virgules. Les appels s’exécutent dans l’ordre. Cela invoque chaque fonction ; cela ne transmet pas de valeurs de fonction à l’attribut.

Exécutez cet exemple :

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

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

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

handleClick();

Cet exemple autonome démontre l’ordre des instructions. Dans une page, les mêmes appels peuvent être placés dans le gestionnaire en ligne d’un bouton :

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

L’élément doit être présent dans la page, et les deux fonctions nommées doivent être disponibles au moment du clic. Si un appel lève une exception non interceptée, les instructions suivantes dans ce même gestionnaire ne s’exécutent pas. Gérez les erreurs à l’intérieur d’une fonction si l’action suivante doit tout de même avoir lieu.

Enregistrer plusieurs gestionnaires de clic avec addEventListener

Pour le code de page, enregistrez chaque callback séparément. Le navigateur invoque les écouteurs du clic dans l’ordre d’enregistrement. Si un écouteur lève une erreur, la distribution de l’événement signale cette erreur, tandis que les autres écouteurs enregistrés sont tout de même distribués ; des écouteurs séparés ne promettent pas que le travail asynchrone d’un callback est terminé avant qu’un autre ne commence.

<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 nécessite le même type d’événement, le même objet de fonction callback et le même paramètre de capture que ceux utilisés pour l’enregistrement. Si vous enregistrez une fonction anonyme et ne conservez pas de référence à celle-ci, vous ne pourrez pas transmettre ce même objet de fonction pour la supprimer plus tard. Le HTML garde le bouton visible et le JavaScript dans le script de la page ; cet exemple de navigateur n’est pas un exemple de sortie de console.

Utiliser && et || pour les appels conditionnels

Les opérateurs logiques font un court-circuit : && évalue son côté droit uniquement lorsque le côté gauche est vrai, tandis que || évalue son côté droit uniquement lorsque le côté gauche est faux. C’est utile lorsque la deuxième action ne doit s’exécuter que sous cette condition, mais cela n’enregistre pas plusieurs écouteurs d’événements.

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

Ici, fetchPageDetails ne s’exécute que lorsque isValidPage renvoie une valeur vraie. Avec ||, un appel de secours peut s’exécuter lorsque la première expression est fausse, par exemple hasSavedValue() || loadDefaultValue(). Utilisez && et || pour une exécution conditionnelle délibérée ; utilisez des écouteurs séparés lorsque chaque callback enregistré doit répondre au clic.