Selection dom

Résolu

papadinosaure Messages postés 7 Date d'inscription Statut Membre Dernière intervention -
papadinosaure Messages postés 7 Date d'inscription Statut Membre Dernière intervention - 19 juil. 2022 à 17:38

Bonsoir à tous,

J'ai plusieurs articles qui ont chacun plusieurs paragraphes.
J'ai associé une classe du même nom au dernier paragraphe de chacun de mes articles, avec comme contenu textuel: "un bouton"

<article class="article">
<p></p>
<p class="bouton">un bouton </p>
</article>

<article class="article">
<p></p>
<p class="bouton">un bouton </p>
</article>

etc ...

Je voudrais associer ces paragraphes à une méthode comme : document.querySelector("bouton").addEventListener("click", fonction)
Pour qu'en cliquant sur un de ces paragraphes en particulier, cela déclenche qqchose.

Le problème c'est que je n'arrive qu'à selectionner le paragraphe "bouton" du premier article.

document.querySelector(".un bouton")
.addEventListener("click", (event) => {event.target.innerHTML = "ok";});

Ou alors de faire un querySelector sur une div englobant tous les articles, mais dans ce cas tous les elements deviennent cliquable, et ce n'est pas ce que je veux.

document
.querySelector(".classeDeMaDivEnglobantLesArticles")
.addEventListener("click", (event) => {....}

N'y a-t-il pas un moyen de sélectionner directement le paragraphe sur lequel je clique ?

Afficher la suite

1 réponse

Réponse 1 / 1
jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
Bonjour

Pour cibler une classe il ne faut pas oublier de mettre le point devant
```
document.querySelector(".bouton").addEventListener("click", fonction)
```
0
1. papadinosaure Messages postés 7 Date d'inscription Statut Membre Dernière intervention
  
  Oui pardon, c'est une négligence de retranscription, mais j'ai bien mis le point dans mes codes.
  
  0
2. Pitet Messages postés 2845 Statut Membre 530
  
  Bonjour,
  
  document.querySelector() retourne effectivement le premier élément correspondant au sélecteur.
  
  Utilise document.querySelectorAll() pour récupérer plusieurs éléments.
  
  document.querySelectorAll('.bouton').forEach((element) => { element.addEventListener('click', (event) => { // ... }); });
  
  1
  1. papadinosaure Messages postés 7 Date d'inscription Statut Membre Dernière intervention > Pitet Messages postés 2845 Statut Membre
    
    Merci beaucoup, je n'avais pas pensé à cette utilisation.
    
    0

Selection dom

1 réponse

Discussions similaires

Newsletters