Błąd podczas użycia foreach na elementach DOM

Błąd podczas użycia foreach na elementach DOM
LI
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 518
0

Czy może mi ktoś wytłumaczyć co robię nie tak? Mam 3 karty na stronie. Pobieram je za pomocą querySelectorAll i chce wywołać na każdym elemencie funkcję, przez użycie foreach. Dostaję taki o to błąd:

Kopiuj
Uncaught TypeError: cards.foreach is not a function
    at HTMLInputElement.changePricing
Kopiuj
        const toogle = document.getElementById("toogle");
        const cards = document.querySelectorAll(".card");
        console.log(cards);
        const changePricing = () => {

            if (toogle.checked) {
                console.log("is checked");
                cards.foreach(item => {
                    item.lastChild.style.display = "none";
                    item.firstChild.style.display = "auto";
                });

            } else {
                cards.foreach(item => {
                    console.log("is not checked");
                    item.lastChild.style.display = "none";
                    item.firstChild.style.display = "auto";

                });

            }

        };

        toogle.addEventListener("click", changePricing);
hzmzp
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 741
1

cards nie jest tablicą po której możesz iterować. Co zwraca ci
console.log(cards);

Freja Draco
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 3394
0

Pokaż działający demonstrator błędu.

KamilAdam
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Silesia/Marki
  • Postów: 5549
0

Eh dzieci i ich zabawki czyli dynamiczne typowane języki programowania.

cards jest typu NodeList a nie Array. Tu jest kilka haków jak to rozwiązać

hzmzp
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 741
1

@KamilAdam: ale NodeList zawiera prototyp forEach, chyba że koleś ma prehistoryczną przeglądarkę. https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

KamilAdam
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Silesia/Marki
  • Postów: 5549
2
hzmzp napisał(a):

@KamilAdam: ale NodeList zawiera prototyp forEach, chyba że koleś ma prehistoryczną przeglądarkę. https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

To chyba mamy odpowiedź forEach, a nie foreach :D

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.