Marrja e elementeve DOM pa përsëritje

Le të supozojmë se kemi disa paragrafë dhe një buton:

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

<button>click me</button>

Le të supozojmë se përdoruesi klikon në këta paragrafë në mënyrë të rastësishme. Le të bëjmë që, gjatë klikimit në buton, në fund të çdo paragrafi në të cilin është kryer një klikim, të shtohet një pikëçuditëse. Le ta zgjidhim këtë detyrë duke përdorur Set.

Le të fillojmë. Së pari, le të marrim elementet tona në variabla:

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

Le të krijojmë një koleksion të ri Set:

let set = new Set;

Le të përsërisim paragrafët me një cikël dhe t'u caktojmë atyre një përpunues klikimi:

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

Tani, le të shtojmë këtë paragraf në koleksion kur klikohet në paragraf:

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

Për shkak se ne përdorim koleksionin Set, klikimi i përsëritur në një paragraf nuk do të çojë në shtimin e një përsëritjeje të paragrafit.

Tani, le të klikojmë në buton dhe të përsërisim përmbajtjen e koleksionit tonë dhe çdo paragrafi në fund të shtojmë një pikëçuditëse:

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

Janë dhënë disa paragrafë dhe një buton. Përdoruesi klikon në këta paragrafë në mënyrë të rastësishme. Bëni që gjatë klikimit në buton, në fund të çdo paragrafi në të cilin është kryer një klikim, të shtohet një pikëçuditëse.