pobieranie wszystkich klas o takiej samej nazwie

Question

Witam, mam taki problem że mam na stronie kilkanaście ikon i chcę aby po kliknięciu na każdą z nich coś się zadziało. Nadałem ikoną takie same klasy i teraz w JS chcę pobrać te elementy po klasie i przypisać do zmiennej do której dodałem addEventListener: 

let myIcons = document.querySelector('.icon');
let iconDesc = document.querySelector(".icon__desc');

myIcons.addEventListener('click' , function() {

         iconDesc.classList.toggle('active');

});

Problem w tym że wtedy to działa ale tylko na pierwszym elemencie z daną klasą '.icon'

Próbowałem jeszcze zamiast eventListenera do zmiennej przypisać 'onclicka' ale tez nie działa.

Albo pobrać po getElementsByClassName - nie działa wcale, nie wiem dokładnie jak tego używać ?

Czy naprawdę muszę tyle kodu napisać i dodawać osobne klasy do każdej z ikon i przypisywać do osobnych zmiennych i z tego utworzyć fuknkcję ? czyżby nie dało się pobrać takich samych klas żeby zadziałało dla wszystkich elementów ?

Będę wdzięczny za wszelką pomoc, pozdrawiam!

Answer 1

Do pobrania wszystkich elementów za pomocą selektorów służy metoda querySelectorAll()

Tu jest przykład jak to wykorzystać: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#Accessing_the_matches

Comments

Wow super ! Właśnie próbowałem z querrySelectorAll ale źle tego używałem :) Teraz zrobiłem tak:

let myIcon = document.querySelectorAll('.skills__button');

for (const btn of myIcon) {
    //podpinam pod każdy przycisk zdarzenie click
    btn.addEventListener('click', function() {
    
            console.log(this.innerText);
    });
}

I działa jak należy. Dziękuję bardzo za pomoc i pozdrawiam !

---

Zapoznaj się jeszcze z techniką event delegation.