Événements sur plusieurs éléments

🎯 Objectif

Ajouter un événement à plusieurs éléments avec forEach.

📖 Contexte

Pour ajouter un événement à plusieurs éléments, on combine querySelectorAll et forEach :

const boutons = document.querySelectorAll(".btn")

boutons.forEach(bouton => {
  bouton.addEventListener("click", () => {
    console.log("Bouton cliqué :", bouton.textContent)
  })
})

Pourquoi forEach ?

querySelectorAll retourne une liste d'éléments. On ne peut pas faire liste.addEventListener() directement. Il faut parcourir chaque élément.

Attributs data-* et dataset

Les attributs HTML data-* sont accessibles en JavaScript via la propriété dataset :

// HTML : <button data-color="red">Rouge</button>
const btn = document.querySelector("button")
console.log(btn.dataset.color)  // "red"

📝 Consigne

Ajoute un événement "click" à chaque bouton qui :

1. Affiche la couleur dans la console
2. Change la couleur de fond de #apercu

Résultat attendu (après clic sur "Rouge") :

• Console : red
• L'apercu devient rouge

Teste en cliquant sur les boutons de couleur !