JavaScript / Débutant / 9 min

Un bouton, une vraie interaction

Relier un événement à une action, sans bibliothèque.

Guide de la rédaction · 17 octobre 2026

Choisir le bon élément

Utilisez button pour déclencher une action et a pour naviguer. Un vrai bouton fonctionne déjà avec la souris et le clavier. Indiquez type="button" pour éviter un envoi involontaire lorsqu’il se trouve dans un formulaire.

<button type="button" id="compter">Ajouter un point</button>
<p id="score" aria-live="polite">Score : 0</p>
<script>
  const bouton = document.querySelector("#compter");
  const affichage = document.querySelector("#score");
  let score = 0;
  bouton.addEventListener("click", () => {
    score += 1;
    affichage.textContent = `Score : ${score}`;
  });
</script>

Séparer état et affichage

La variable score contient la valeur. Le paragraphe affiche cette valeur. À chaque clic, on modifie d’abord l’état, puis le texte. textContent insère du texte et évite d’interpréter une valeur comme du HTML.

Comprendre le chargement

Dans cet exemple, le script est placé après le bouton : les éléments existent quand il s’exécute. Pour un fichier séparé chargé dans head, utilisez <script src="app.js" defer></script>. Si querySelector renvoie null, vérifiez le sélecteur et le moment du chargement.

Vérifier le fonctionnement

Cliquez trois fois : le score doit être 3. Rechargez : il revient à 0, car il reste seulement en mémoire. Avec Tab, placez le focus sur le bouton, puis appuyez sur Entrée. L’interaction doit aussi fonctionner au clavier.

À vous de jouer

Ajoutez un deuxième bouton qui remet score à zéro et actualise le paragraphe. N’ajoutez pas de stockage avant d’en avoir besoin : une valeur conservée dans le navigateur ne serait de toute façon pas un score sécurisé.

Pour aller plus loin

Retrouvez les références des langages dans les ressources MDN pour apprendre le développement web.