DOM elementų gavimas be dublikatų

Tarkime, kad turime pastraipas ir mygtuką:

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

<button>click me</button>

Tegul vartotojas spusteli šias pastraipas bet kokia tvarka. Padarykime taip, kad paspaudus mygtuką į kiekvienos pastrapos, ant kurios buvo spustelta, galą būtų pridėtas šauktukas. Išspręskime užduotį naudojant Set.

Pradėkime. Pirmiausia gaukime savo elementus į kintamuosius:

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

Sukurkime naują Set kolekciją:

let set = new Set;

Pereikime per pastraipas ciklu ir uždėkime ant jų paspaudimo apdorojimo funkciją:

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

Dabar paspaudus ant pastraipos pridėkime šią pastraipą į kolekciją:

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

Dėl to, kad naudojame Set kolekciją, pakartotinis paspaudimas ant pastraipos nesukels pastrapos dublio pridėjimo.

Dabar paspaudus ant mygtuko pereikime mūsų kolekcijos turinį ir kiekvienai pastrapai į galą pridėkime šauktuką:

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

Duotos pastraipos ir mygtukas. Vartotojas spusteli šias pastraipas bet kokia tvarka. Padarykite taip, kad paspaudus mygtuką į kiekvienos pastrapos, ant kurios buvo spustelta, galą buvo pridėtas šauktukas.