JavaScript -> document.querySelector nie działa z backtickami i zmiennymi

Question

Witam, otrzymuję error:

Uncaught TypeError: Cannot read properties of null (reading 'style')

w moim fragmenie kodu:

for(let j=1; j<=player_count; j++)
        {
            for(let i=1; i<=39; i++)
            {
                if(document.querySelector(`.player-${j}-owned-cards .owned-card${i}`))
                {
                    //document.querySelector(`.player-${j}-owned-cards .owned-card${i}`).style.visibility = 'hidden';
                }
            }
            for(let i=5; i<=35; i+=10)
            {
                document.querySelector(`.player-${j}-owned-cards .owned-card${i}`).style.fontSize = '0.3rem';
            }
        }

gdzie w instrukcji if przechodzi test, ale w

for(let i=5; i<=35; i+=10)
            {
                document.querySelector(`.player-${j}-owned-cards .owned-card${i}`).style.fontSize = '0.3rem';
            }

dostaję wyżej wymieniony błąd, a querySelector jest identyczny, .style.fontSize jest poprawną metodą, a wartość '0.3rem' również jest prawidłowa, w debugerze Chrome na elemencie zostaje nadany font-size: 0.3rem; ale dostaję taki error. Kiedy dałem konkretną wartość zamiast zmiennej, to nie było errora. Dlaczego tak się dzieje?

Comments

Wykonsoluj sobie zmienne i oraz j przed kodem, który rzuca błąd i sprawdź czy wartości są prawidłowe.

---

Zapomniałem, że te wszystkie pętle są w jeszcze innej pętli, kiedy nie było 2 razy iteratora "i", to już nie wyrzuca errora:

for(let j=1; j<=39; j++)
            {
                if(document.querySelector(`.player-${i}-owned-cards .owned-card${j}`))
                {
                    //document.querySelector(`.player-${j}-owned-cards .owned-card${i}`).style.visibility = 'hidden';
                }
            }
            for(let k=5; k<=35; k+=10)
            {
                console.log(i, k);
                document.querySelector(`.player-${i}-owned-cards .owned-card${k}`).style.fontSize = '0.2rem';
            }

tylko jest nadal problem - font-size i tak nie jest zmieniany w tych elementach, a konsola wyrzuca prawidłowe liczby. O co może chodzić?

---

Czy możesz podlinkować minimalny kod pozwalający na reprodukcję tego problemu np. na stronie codepen.io?

---

Jasne, mogę podać nawet cały kod:

https://codepen.io/DogeDoge/pen/BaZOdRe

Miejsce błędu jest zakomentowane w 147. linii. Powinna się zmniejszać czcionka na szarych kartach po bokach planszy

---

Wygodniej by to było sprawdzać na minimalnym kodzie niż całym. :P

Błąd pojawia się, bo w danym momencie w DOM nie ma elementu o selektorze '.player-2-owned-cards .owned-card5'. jest natomiast '.player-owned-cards .player-1-owned-cards'.

---

Do naprawy musiałem pozmieniać nazwy iteratorów w pętlach for, a w naprawionym kodzie bez errora nie zmieniał się font-size mimo tego, że był w debugerze Chrome podany, ponieważ na childach w css był również podany font-size i po prostu ten z parenta nie wpływał na nic.