Problem z wyświetleniem zawartości diva w JS

Question

Witam mam problem z projektem. W sekcji produkty mam dwie kategorie lamp. Sosnowe(wyświetlane domyślnie) i dębowe. W karcie produktu jest umieszczony przycisk więcej który po kliknięciu wyświetla tekst zamiast zdjęcia. Problem jest taki, że w karcie sosnowe wszystko działa poprawnie ale w karcie dębowe po kliknięciu w przycisku więcej, nic się nie wyświetla poza błędem w konsoli: ,,Uncaught TypeError: Cannot read property 'classList' of undefined

at HTMLButtonElement.<anonymous> (main.js:136)"

Tutaj link do codepena: https://codepen.io/kamil-kowal/pen/RwRdBPx

Answer 1

Problem masz tutaj:

                for (let i = 0; i < btn.length; i++) {

                    if (btn[i].classList.contains('active')) {
                        infoCard[i].classList.toggle('active')
                    }

tablica btn zawiera 7 elementów - wszystkie buttony z klasą .information

infoCard zawiera u Ciebie 4 (po kliknięciu na sosnowe) i 3 (po kliknięciu na dębowe) elementy.

W podanym kodzie pętla przechodzi zawsze 7 razy sprawdzając każdy przycisk czy zawiera klasę 'active' w przypadku dębowe znajduje go na indeksie 4,5 lub 6 ponieważ przyciski o indeksach 0-3 odpowiadają za sosnowe a o indeksach 4-6 za dębowe, następnie próbuje dostać się do indeksu 4,5 lub 6 tablicy infoCard która w tym przypadku ma tylko 3 elementy

Comments

Dzięki już zrozumiałem gdzie był błąd a Ty mnie naprowadziłeś. Przy pobieraniu infoCard miałem dodaną klasę active i tylko te pobierałem. Kiedy usunąłem z querrySelectorAll klasę active wszystko działa cacy. Dzięki!