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

Błąd podczas użycia foreach na elementach DOM
LI
  • Rejestracja:ponad 11 lat
  • Ostatnio:ponad 3 lata
  • 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);

Life is Strange
hzmzp
  • Rejestracja:ponad 11 lat
  • Ostatnio:3 dni
  • Postów:625
1

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

Freja Draco
Freja Draco
  • Rejestracja:około 7 lat
  • Ostatnio:ponad 3 lata
  • Postów:3394
0

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


KamilAdam
  • Rejestracja:ponad 6 lat
  • Ostatnio:około miesiąc
  • Lokalizacja:Silesia/Marki
  • Postów:5505
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ć


Mama called me disappointment, Papa called me fat
Każdego eksperta można zastąpić backendowcem który ma się douczyć po godzinach. Tak zostałem ekspertem AI, Neo4j i Nest.js . Przez mianowanie
hzmzp
  • Rejestracja:ponad 11 lat
  • Ostatnio:3 dni
  • Postów:625
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

edytowany 1x, ostatnio: hzmzp
KamilAdam
  • Rejestracja:ponad 6 lat
  • Ostatnio:około miesiąc
  • Lokalizacja:Silesia/Marki
  • Postów:5505
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


Mama called me disappointment, Papa called me fat
Każdego eksperta można zastąpić backendowcem który ma się douczyć po godzinach. Tak zostałem ekspertem AI, Neo4j i Nest.js . Przez mianowanie
hzmzp
fakt, tak to jest jak się pajacuje w js bez ide :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.