Pourquoi « querySelector » sélectionne-t-il uniquement le premier élément et comment y remédier ?

Pourquoi querySelector sélectionne uniquement le premier élément et comment y remédier

Lors de l'utilisation de querySelector, il est important de se rappeler qu'il sélectionne uniquement le premier élément élément correspondant dans le document. Si vous avez plusieurs éléments avec la même classe ou le même identifiant, seul le premier sera renvoyé.

Dans votre cas, vous avez plusieurs boutons avec la même classe en semaine représentant des dates sur un calendrier . Lorsque vous cliquez sur l'un d'entre eux, cela ne fonctionne pas car querySelector ne sélectionne que le tout premier.

La solution est d'utiliser querySelectorAll à la place, qui renvoie une liste de nœuds de tous éléments correspondants. Vous pouvez ensuite parcourir la liste et attacher des écouteurs d'événement à chacun.

Voici le code corrigé :

document.querySelectorAll(".weekdays").forEach(elem => elem.addEventListener("click", () => {
    document.querySelector(".bg-modal").style.display = "flex";
}));

Cela attachera un écouteur d'événement à chaque élément avec la classe en semaine, garantissant que n'importe quelle date peut ouvrir le formulaire en cliquant dessus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!