Cours

JavaScript Défi final

Le compteur limité

Sélectionner des éléments, réagir à un clic, mettre à jour la page et bloquer à une limite.

25 min

Ce défi réunit les variables, les conditions et la manipulation de la page. Tu peux le tester chez toi dans une vraie page HTML, en ouvrant la console avec F12.

Le défi

La page contient <button id="plus">+1</button> et <p id="total">0</p>. Écris le JavaScript qui :

  • sélectionne les deux éléments ;
  • garde le nombre de clics dans une variable créée avec let ;
  • à chaque clic, ajoute 1 et affiche le nombre dans #total avec textContent ;
  • quand le nombre atteint 10, désactive le bouton (bouton.disabled = true).
script.js
  • Le bouton #plus est sélectionné
  • Le paragraphe #total est sélectionné
  • Le compteur est une variable let qui démarre à 0
  • Un écouteur de clic est ajouté
  • Le total est affiché avec textContent
  • Le bouton est désactivé à 10
  • Pas de innerHTML ni de var
Bloqué ? Voir une solution 
const bouton = document.querySelector("#plus");
const total = document.querySelector("#total");
let clics = 0;

bouton.addEventListener("click", () => {
  clics++;
  total.textContent = clics;
  if (clics >= 10) {
    bouton.disabled = true;
  }
});