Vider le panier — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 12)

Vider le panier

Projet : la Librairie interactive · niveau 2

Énoncé

Ajouter à la page Panier un bouton « Vider le panier ». Pour éviter les accidents, un premier clic change son texte en « Confirmer : vider le panier » ; un second clic dans les cinq secondes vide le panier ; passé ce délai, le bouton reprend son texte. Pourquoi est-ce préférable à window.confirm ?

Corrigé


const bouton = document.querySelector("#vider");
const etat = document.querySelector("#etat");
let minuteur = null; // non nul pendant les 5 s où le bouton attend la confirmation

function revenir() {
  clearTimeout(minuteur);
  minuteur = null;
  bouton.textContent = "Vider le panier";
}

bouton.addEventListener("click", () => {
  if (minuteur === null) {
    bouton.textContent = "Confirmer : vider le panier";
    minuteur = setTimeout(revenir, 5000);
    return;
  }
  revenir();
  try {
    localStorage.removeItem("librairie.panier");
  } catch {
    // stockage indisponible : il n'y avait rien d'enregistré
  }
  etat.textContent = "Votre panier est vide.";
});

Vérifié dans Chromium avec une horloge simulée : après un clic, le bouton dit « Confirmer : vider le panier » ; six secondes plus tard, il est revenu à « Vider le panier » et le panier est intact ; deux clics rapprochés le vident. window.confirm ouvre une fenêtre modale qui bloque toute la page (et le fil d'exécution), à l'apparence imposée par le navigateur, et que certains navigateurs suppriment quand elle se répète. Dans la Librairie, il faudrait en plus appeler enregistrer([]) pour mettre à jour le tableau et le compteur.