Yinelenenler Olmadan DOM Elemanlarını Alma
Diyelim ki paragraflarımız ve bir butonumuz var:
<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>
<button>click me</button>
Kullanıcının bu paragraflara rastgele sırayla
tıkladığını varsayalım. Butona tıklandığında,
tıklanan her paragrafın sonuna bir ünlem işareti
eklenmesini sağlayalım. Bu sorunu Set
kullanarak çözelim.
Hadi başlayalım. İlk olarak elemanlarımızı değişkenlere alalım:
let button = document.querySelector('button');
let elems = document.querySelectorAll('p');
Yeni bir Set koleksiyonu oluşturalım:
let set = new Set;
Paragrafları bir döngü ile geçelim ve onlara tıklama olay işleyicisi ekleyelim:
for (let elem of elems) {
elem.addEventListener('click', function() {
});
}
Şimdi bir paragrafa tıklandığında, bu paragrafı koleksiyona ekleyelim:
for (let elem of elems) {
elem.addEventListener('click', function() {
set.add(this);
});
}
Set koleksiyonunu kullandığımız için,
aynı paragrafa tekrar tıklanması, paragrafın
yinelenen olarak eklenmesine yol açmayacaktır.
Şimdi butona tıklandığında, koleksiyonumuzun içeriğini geçelim ve her paragrafın sonuna bir ünlem işareti ekleyelim:
button.addEventListener('click', function() {
for (let elem of set) {
elem.textContent = elem.textContent + '!';
}
});
Paragraflar ve bir buton verilmiştir. Kullanıcı bu paragraflara rastgele sırayla tıklar. Butona basıldığında, tıklanan her paragrafın sonuna bir ünlem işareti eklenmesini sağlayın.
