JS - addEventListener reaguje tylko na pierwszy element menu.

Question

Hej, mam mały problem dotyczący JS`a, za pomocą addEventListener chciałem, aby funkcja przy "kliku" na element menu, zmieniała właściwość  innego elementu na stronie. Niby wszystko śmiga, ale całą operacje wykonuje tylko pierwszy element menu, po którego kliknięciu zmienia się ta właściwość, o którą mi chodzi. Reszta przycisków nie działa tak samo, mimo, że ma tą samą klasę. Ratujcie :// 

var el1 = document.querySelector(".fmenu");

var el2 = document.querySelector(".main");

el1.addEventListener("click", function() {
   el2.style.display = "none";
});

 

Answer 1

document.querySelector(".fmenu")

Zwraca pierwszy napotkany element z klasą fmenu. Tylko do tego jednego elementu dodajesz listener - dlatego reszta elementów "nie działa"

Comments

Dziękuję za odpowiedź! A czy jest jakaś opcja, która pozwoli na dodanie go do wszystkich elementow?

---

Jest document.querSelectorAll, który zwróci wszystkie elementy z daną klasą. Wtedy za pomocą pętli (na przykład forEach) możesz przypisać listener do każdego elementu z osobna.

Trochę bardziej eleganckim rozwiązaniem jest zastosowanie event delegation.

---

Przyznam, że specem nie jestem i wydziergałem coś takiego:

var el1 = document.querySelectorAll(".fmenu");

var el2 = document.querySelector(".main");

el1.forEach(function() {
    el1.addEventListener("click", function() {
        el2.style.display = "none";
});
});

Jak się domyślasz, nie działa .  Czy to jakiś błąd w pętli? 

---

Spójrz na przykład użycia forEach

---

Ok, rozsierdziło mnie to wczoraj, a dzisiaj wszedłem, zmieniłem jedną wartość i śmiga, dziękuje! :D