Pridobivanje DOM elementov brez podvajanj

Recimo, da imamo odstavke in gumb:

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

<button>click me</button>

Naj uporabnik klikne te odstavke v poljubnem vrstnem redu. Naredimo tako, da se ob pritisku na gumb na konec vsakega odstavka, na katerega je bilo kliknjeno, doda klicaj. Rešimo nalogo z Set.

Začnimo. Najprej pridobimo naše elemente v spremenljivke:

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

Ustvarimo novo zbirko Set:

let set = new Set;

Preglejmo odstavke z zanko in nanje dodajmo opravilni program za klik:

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

Sedaj ob kliku na odstavek dodajmo ta odstavek v zbirko:

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

Zaradi tega, ker uporabljamo zbirko Set, ponovni klik na odstavek ne bo povzročil dodajanja podvojitve odstavka.

Sedaj ob kliku na gumb pregledajmo vsebino naše zbirke in vsakemu odstavku na konec dodajmo klicaj:

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

Podani so odstavki in gumb. Uporabnik klikne te odstavke v poljubnem vrstnem redu. Naredite tako, da se ob pritisku na gumb na konec vsakega odstavka, na katerega je bil kliknjen, doda klicaj.