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

Retirer du panier

Événements et formulaires · niveau 2

Énoncé

Chaque ligne d'un panier <ul id="panier"> contient un bouton <button class="supprimer"> qui retire la ligne. Écrire le script avec un seul écouteur, puis mettre à jour un paragraphe qui indique le nombre d'articles, ou « Panier vide ». Pourquoi chaque bouton porte-t-il un aria-label ?

Corrigé


const panier = document.querySelector("#panier");
const etat = document.querySelector("#etat");

panier.addEventListener("click", (e) => {
  const bouton = e.target.closest(".supprimer");
  if (!bouton) {
    return;
  }
  const ligne = bouton.closest("li");
  console.log("retiré :", ligne.dataset.isbn);
  ligne.remove();
  const n = panier.children.length;
  etat.textContent = n === 0 ? "Panier vide" : `${n} article${n > 1 ? "s" : ""}`;
  console.log(etat.textContent);
});

On retire Analyse MPSI, on clique sur le texte d'une ligne (rien ne se passe), puis on retire les deux autres livres :


retiré : b
2 articles
retiré : a
1 article
retiré : c
Panier vide

Le bouton ne contient que « × » : sans aria-label, un lecteur d'écran annoncerait « bouton, fois » trois fois, sans dire lequel retire quoi. Le libellé « Retirer Analyse MPSI » rend chaque bouton compréhensible hors de son contexte visuel.