Comment Faire Appel A Une Fonction Js En Html

Vous savez, l'autre jour, j'étais en train de coder un petit jeu. Un truc tout simple, hein, un peu comme un morpion (oui, oui, le tic-tac-toe pour les puristes). Et là, le drame! Je voulais que quand on clique sur une case, une fonction JavaScript se déclenche... et rien! Le vide intersidéral. J'ai failli balancer mon clavier par la fenêtre (ne le faites pas, c'est mauvais pour la productivité!).

Finalement, après quelques tasses de café et une bonne dose de recherches Google, j'ai compris. C'était tout bête, mais il fallait le savoir. Alors, pour éviter que vous ne subissiez le même sort que moi, je vous explique comment appeler une fonction JavaScript depuis votre code HTML. Accrochez-vous, c'est plus simple qu'il n'y paraît!

La méthode classique: l'attribut `onclick`

C'est la méthode la plus simple et la plus directe. Vous ajoutez un attribut `onclick` à votre élément HTML (un bouton, une div, un paragraphe, peu importe) et vous spécifiez le nom de la fonction JavaScript à appeler. C'est un peu comme si vous disiez : "Hey, quand on clique sur moi, tu vas faire ça!".

Exemple concret:

<button onclick="maFonction()">Cliquez ici !</button>

Attention! Le nom de la fonction doit être exactement le même que celui que vous avez défini dans votre fichier JavaScript. Sinon, ça ne marchera pas. Croyez-moi, j'ai testé. 😉

Et dans votre fichier JavaScript :

function maFonction() {
  alert("Bonjour le monde !");
}

Magique! Enfin, si vous avez bien tout fait comme il faut. Au clic, une petite fenêtre d'alerte devrait s'afficher. Si ce n'est pas le cas, vérifiez votre console (F12 dans la plupart des navigateurs) pour voir s'il y a des erreurs. Les erreurs sont vos amies! (Si, si, croyez-moi, elles vous indiquent où vous vous êtes trompé.)

L'écouteur d'événements: la méthode moderne

La méthode `onclick` est pratique, mais elle a ses limites. Imaginez que vous ayez besoin d'appeler plusieurs fonctions au clic, ou que vous ayez besoin de passer des arguments à votre fonction. Là, ça devient vite le bazar.

C'est là qu'interviennent les écouteurs d'événements. C'est une méthode plus propre et plus flexible. L'idée, c'est de "brancher" une fonction JavaScript à un événement spécifique (un clic, un passage de souris, une touche pressée, etc.) sur un élément HTML.

Pour faire ça, vous avez besoin de JavaScript (évidemment!). Voici un exemple:

<button id="monBouton">Cliquez ici !</button>

<script>
  const bouton = document.getElementById("monBouton");

  bouton.addEventListener("click", function() {
    alert("Bonjour le monde ! (via un écouteur d'événements)");
  });
</script>

Décortiquons un peu ce code:

• On récupère l'élément HTML avec l'ID "monBouton" grâce à `document.getElementById()`.
• On utilise la méthode `addEventListener()` pour "écouter" l'événement "click" sur cet élément.
• On lui passe une fonction (anonyme dans cet exemple) qui sera exécutée quand l'événement "click" se produira.

L'avantage de cette méthode, c'est que vous pouvez ajouter autant d'écouteurs d'événements que vous voulez à un même élément. Vous pouvez aussi facilement passer des arguments à votre fonction:

bouton.addEventListener("click", function() {
  maFonctionAvecArguments("Hello", "World");
});

function maFonctionAvecArguments(arg1, arg2) {
  alert(arg1 + " " + arg2);
}

Et si on utilisait jQuery?

Si vous utilisez la librairie jQuery (et pourquoi pas, après tout!), la syntaxe est encore plus simple. (Mais attention, jQuery est un peu "old school" maintenant. Beaucoup de choses qu'on faisait avec jQuery peuvent être faites en JavaScript natif.)

<button id="monBouton">Cliquez ici !</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $("#monBouton").click(function() {
      alert("Bonjour le monde ! (via jQuery)");
    });
  });
</script>

Vous voyez, c'est presque de la poésie! `$("#monBouton").click(function() { ... });` C'est clair, concis, efficace. Mais n'oubliez pas d'inclure la librairie jQuery dans votre HTML avant d'utiliser cette méthode! (La balise `