DOM-elementtien hankinta ilman duplikaatteja

Oletetaan, että meillä on kappaleita ja painike:

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

<button>click me</button>

Anna käyttäjän napsautella näitä kappaleita missä tahansa järjestyksessä. Tehdään niin, että painiketta painamalla jokaisen napsautetun kappaleen loppuun lisätään huutomerkki. Ratkaistaan tehtävä Set:n avulla.

Aloitetaan. Ensin haetaan elementtimme muttujiin:

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

Luodaan uusi Set-kokoelma:

javascriptlet set = new Set;

Käydään läpi kappaleet silmukalla ja asetetaan niille klikkauskäsittelijä:

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

Lisätään nyt kappaleen napsautuksen yhteydessä kyseinen kappale kokoelmaan:

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

Koska käytämme Set-kokoelmaa, kappaleen uudelleen napsautus ei johtaisi kappaleen duplikaatin lisäämiseen.

Asetetaan nyt painikkeen napsautukselle toiminto, joka käy läpi kokoelmamme sisällön ja lisää jokaisen kappaleen loppuun huutomerkin:

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