DOM elementide hankimine ilma duplikaatideta

Oletame, et meil on lõigud ja nupp:

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

<button>click me</button>

Oletame, et kasutaja klõpsab neil lõikudel suvalises järjekorras. Teeme nii, et nupu vajutamisel iga lõigu lõppu, millele on klõpsatud, lisatakse hüüumärk. Lahendame ülesande läbi Set.

Alustame. Kõigepealt hankige meie elemendid muutujatesse:

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

Loome uue kollektsiooni Set:

let set = new Set;

Läbime lõigud tsükliga ja paneme neile klõpsuhalduri:

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

Klõpsake nüüd lõigul, lisame selle kollektsiooni:

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

Tänu sellele, et me kasutame kollektsiooni Set korduv klõps lõigul ei too kaasa lõigu duplikaadi lisamist.

Klõpsake nüüd nupul, läbime meie kollektsiooni sisu ja igale lõigule lõppu lisame hüüumärgi:

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

Antud on lõigud ja nupp. Kasutaja klõpsab neil lõikudel suvalises järjekorras. Tehke nii, et nupu vajutamisel iga lõigu lõppu, millele on klõpsatud, lisatakse hüüumärk.