DOM elemek lekérése duplikátumok nélkül

Tegyük fel, hogy vannak bekezdéseink és egy gombunk:

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

<button>click me</button>

Tegyük fel, hogy a felhasználó ezekre a bekezdésekre kattint tetszőleges sorrendben. Tegyük úgy, hogy a gomb megnyomására minden egyes bekezdés végére, amire kattintás történt, hozzáadódjon egy felkiáltójel. Oldjuk meg a feladatot Set segítségével.

Kezdjük neki. Először szerezzük meg elemeinket változókba:

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

Hozzunk létre egy új Set gyűjteményt:

let set = new Set;

Vegyük végig a bekezdéseket egy ciklussal és tegyünk rájuk kattintáskezelőt:

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

Mostantól kattintáskor a bekezdésre adjuk hozzá azt a gyűjteményhez:

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

Annak köszönhetően, hogy a Set gyűjteményt használjuk, egy bekezdés ismételt megkattintása nem fog azonos bekezdés hozzáadásához vezetni.

Mostantól a gombra kattintva vegyük végig a gyűjteményünk tartalmát és minden bekezdés végére adjunk hozzá egy felkiáltójelet:

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

Adottak bekezdések és egy gomb. A felhasználó kattint ezekre a bekezdésekre tetszőleges sorrendben. Tegye úgy, hogy a gomb megnyomásakor minden egyes bekezdés végére, amire kattintás történt, hozzáadódjon egy felkiáltójel.