Obtention d'éléments DOM sans doublons

Supposons que nous ayons des paragraphes et un bouton :

<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>

<button>click me</button>

Supposons que l'utilisateur clique sur ces paragraphes dans un ordre arbitraire. Faisons en sorte qu'en cliquant sur le bouton, à la fin de chaque paragraphe sur lequel un clic a été effectué, un point d'exclamation soit ajouté. Résolvons le problème via Set.

Commençons. Pour commencer, mettons nos éléments dans des variables :

let button = document.querySelector('button');
let elems  = document.querySelectorAll('p');

Créons une nouvelle collection Set :

let set = new Set;

Parcourons les paragraphes avec une boucle et attachons-leur un gestionnaire de clic :

for (let elem of elems) {
	elem.addEventListener('click', function() {
		
	});
}

Maintenant, lors d'un clic sur un paragraphe, ajoutons ce paragraphe à la collection :

for (let elem of elems) {
	elem.addEventListener('click', function() {
		set.add(this);
	});
}

Grâce au fait que nous utilisons la collection Set, un nouveau clic sur le paragraphe ne conduira pas à l'ajout d'un doublon du paragraphe.

Maintenant, lors d'un clic sur le bouton, parcourons le contenu de notre collection et ajoutons à chaque paragraphe un point d'exclamation à la fin :

button.addEventListener('click', function() {
	for (let elem of set) {
		elem.textContent = elem.textContent + '!';
	}
});

Des paragraphes et un bouton sont donnés. L'utilisateur clique sur ces paragraphes dans un ordre arbitraire. Faites en sorte qu'en cliquant sur le bouton, à la fin de chaque paragraphe sur lequel un clic a été effectué, un point d'exclamation soit ajouté.