DOM-Elemente ohne Duplikate abrufen

Nehmen wir an, wir haben Absätze und einen Button:

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

<button>click me</button>

Nehmen wir an, der Benutzer klickt in beliebiger Reihenfolge auf diese Absätze. Lassen Sie uns bewirken, dass beim Klicken auf den Button an das Ende jedes Absatzes, auf den geklickt wurde, ein Ausrufezeichen angehängt wird. Wir lösen die Aufgabe mit Set.

Fangen wir an. Holen wir uns zunächst unsere Elemente in Variablen:

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

Erstellen wir eine neue Set-Sammlung:

let set = new Set;

Durchlaufen wir die Absätze mit einer Schleife und hängen einen Click-Eventhandler an sie:

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

Lassen Sie uns nun bei einem Klick auf einen Absatz diesen Absatz zur Sammlung hinzufügen:

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

Da wir die Set-Sammlung verwenden, wird ein erneuter Klick auf einen Absatz nicht zu einem Duplikat des Absatzes führen.

Lassen Sie uns nun beim Klicken auf den Button den Inhalt unserer Sammlung durchlaufen und an jedes Element ein Ausrufezeichen anhängen:

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

Es sind Absätze und ein Button gegeben. Der Benutzer klickt in beliebiger Reihenfolge auf diese Absätze. Sorgen Sie dafür, dass beim Klicken auf den Button an das Ende jedes Absatzes, auf den geklickt wurde, ein Ausrufezeichen angehängt wird.