Afficher/masquer un élément sur click

Bonjour,
J'ai un tableau qui contient une image (loupe) dans une cellule de chaque ligne.
Lorsque je clique sur la loupe, je veux afficher un div.
Lorsque je clique ailleurs que sur l'image qui a provoqué l'affichage, je veux masquer ce div.
Lorsque je clique sur une autre image que celle qui a provoqué l'affichage, je peux soit modifier directement le contenu du div (innerHTML) soit le masquer dans un premier temps et nécessiter alors un autre clic pour afficher le nouveau contenu.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

const glasses = document.querySelectorAll("[src*='glass.png']") ,comment = document.querySelector(".comment") ;   // display comment window.document.addEventListener('DOMContentLoaded', function(e) { comment.classList.add('hidden'); });   window.document.addEventListener('click', function(e) { comment.classList.add('hidden'); });   for(let i=0, max=glasses.length; i<max; i++) { (function(img2) { img2.addEventListener('click', function(e) { comment.classList.remove('hidden'); }); })(glasses[i]); }

---

Je pense que c'est l'évènement de la ligne 12 qui intervient après celui de la ligne 21.

C'est pas bien clair ton histoire.

Citation:

---

Envoyé par moimp

J'ai un tableau qui contient une image (loupe) dans une cellule de chaque ligne.
Lorsque je clique sur la loupe, je veux afficher un div.

---

OK.

Citation:

---

Lorsque je clique ailleurs que sur l'image qui a provoqué l'affichage, je veux masquer ce div.

---

OK. Sauf si on clique sur le div j'imagine?

Citation:

---

Lorsque je clique sur une autre image que celle qui a provoqué l'affichage, je peux soit modifier directement le contenu du div (innerHTML) soit le masquer dans un premier temps et nécessiter alors un autre clic pour afficher le nouveau contenu.

---

Là par contre je ne te suis plus.

Peut-être faudrait-il raisonner et reformuler en terme de focus du div qui apparait et non en terme de clic? (c'est juste une suggestion).

Inutile de passer par l'object window pour obtenir ton document en écrivant window.document, l'objet document te le fournis directement.

Tu n'as pas bien compris le principe de la gestion de l’événement DOMContentLoaded qui sert à s'assurer que l'arbre DOM est bien chargé et ce avant toute référence aux éléments du dit arbre. Si l'arbre n'est pas charger, tes document.querySelectorAll risquent de sonner dans le vide. L'idée est d'encapsuler le code dans la fonction de callback du gestionnaire d'évènement pour qu'il ne soit exécuté qu'une fois l'arbre chargé.

Préfère quand c'est possible, les boucle for ... of aux boucles for classiques.

En fait, je veux afficher temporairement et sur demande un commentaire qui ne tient pas dans une cellule de tableau.
Par rapport à ma question initiale, pour plus de facilité et de clarté, j'ai modifié le point 3.

1. Au chargement de la page, le div doit être masqué.
2. Sur clic d'une image (glass.png), le div s'affiche.
3. Si je clique sur le div lorsqu'il est affiché, je le masque.

J'ai modifié mon code et il fonctionne presque. Le div s'affiche et s'efface comme voulu. Par contre le texte à afficher dans le div n'apparaît pas.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

document.addEventListener('DOMContentLoaded', function() { comment.classList.add('hidden');   for(var el of glasses) { el.addEventListener('click', function() { comment.classList.remove('hidden'); comment.innerHTML = this.dataset.content; console.log(comment); }); }   comment.addEventListener('click', function() { comment.classList.add('hidden'); }); });

---

Pourtant la ligne 11 renvoie

<div class="comment">XXXXX</div>

EDIT: Sur ce nouveau problème d'affichage, j'ai ouvert un nouveau topic. Je considère donc celui-ci comme résolu.