DOM элементтерін дубльсіз алу

Бізде абзацтар мен батырма болсын:

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

<button>click me</button>

Пайдаланушы осы абзацтарды кездейсоқ тәртіпте бассады. Батырманы басқанда, басылған әрбір абзацтың соңына леп белгісі қосылатындай етейік. Мәселені Set арқылы шешейік.

Бастайық. Алдымен элементтерді айнымалыларға алайық:

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

Жаңа Set жинағың құрайық:

let set = new Set;

Абзацтарды циклмен айналып, оларға басу өңдегішін орнатайық:

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

Енді абзацты басқанда, оны жинаққа қосатындай етейік:

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

Set жинағын қолданатындықтан, абзацты қайта басу оның дублін қосуға әкелмейді.

Енді батырманы басқанда біздің жинақтың мазмұнын айналып шығып, әрбір абзацтың соңына леп белгісін қосаайық:

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

Абзацтар мен батырма берілген. Пайдаланушы осы абзацтарды кездейсоқ тәртіпте басады. Батырманы басқанда, басылған әрбір абзацтың соңына леп белгісі қосылатындай етіңіз.