Verkryging van DOM-elemente sonder duplikate

Laat ons paragrawe en 'n knoppie hê:

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

<button>click me</button>

Laat die gebruiker op hierdie paragrawe klik in enige volgorde. Kom ons maak dit so dat met 'n druk op die knoppie aan die einde van elke paragraaf waarop geklik is, 'n uitroepteken bygevoeg word. Los die probleem op met behulp van Set.

Kom ons begin. Kry eers ons elemente in veranderlikes:

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

Skep 'n nuwe Set-versameling:

let set = new Set;

Deurloop die paragrawe met 'n lus en koppel 'n klikhanterer daaraan:

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

Laat ons nou by 'n klik op 'n paragraaf daardie paragraaf by die versameling voeg:

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

Omdat ons die Set-versameling gebruik, sal 'n herhaalde klik op 'n paragraaf nie lei tot die byvoeging van 'n duplikaat van die paragraaf nie.

Laat ons nou by 'n klik op die knoppie die inhoud van ons versameling deurloop en aan elke paragraaf 'n uitroepteken aan die einde toevoeg:

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

Paragrawe en 'n knoppie word gegee. Die gebruiker klik op hierdie paragrawe in enige volgorde. Maak dit sodat met 'n druk op die knoppie aan die einde van elke paragraaf waarop geklik is, 'n uitroepteken bygevoeg word.