Henting av DOM-elementer uten duplikater
La oss si at vi har avsnitt og en knapp:
<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>
<button>click me</button>
La brukeren klikke på disse avsnittene
i vilkårlig rekkefølge. La oss gjøre det slik,
at ved å trykke på knappen blir det
lagt til et utropstegn på slutten av hvert
avsnitt som det er klikket på. La oss løse oppgaven
via Set.
La oss komme i gang. Først henter vi elementene våre i variabler:
let button = document.querySelector('button');
let elems = document.querySelectorAll('p');
La oss opprette en ny Set-samling:
let set = new Set;
La oss gå gjennom avsnittene med en løkke og legge til en klikk-håndterer på dem:
for (let elem of elems) {
elem.addEventListener('click', function() {
});
}
La oss nå ved klikk på et avsnitt legge til dette avsnittet i samlingen:
for (let elem of elems) {
elem.addEventListener('click', function() {
set.add(this);
});
}
På grunn av at vi bruker Set-samlingen
vil ikke et gjentatt klikk på avsnittet føre
til at et duplikat av avsnittet legges til.
La oss nå ved klikk på knappen gå gjennom innholdet i samlingen vår og legge til et utropstegn på slutten av hvert avsnitt:
button.addEventListener('click', function() {
for (let elem of set) {
elem.textContent = elem.textContent + '!';
}
});
Det er gitt avsnitt og en knapp. Brukeren klikker på disse avsnittene i vilkårlig rekkefølge. Gjør slik at ved å trykke på knappen blir det lagt til et utropstegn på slutten av hvert avsnitt som det er klikket på.
