You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
TypeError velmi obecně naznačuje, že někde pravděpodobně nesedí typy proměnných. To je první indicie, která nás může navést správným směrem, byť zrovna v Javascriptu je chyba typu TypeError spíš zavádějící, než užitečná.
Naštěstí se tu chybu snaží vysvětlit hned v další větě: Cannot read properties of <něco>:
Properties mají jen objekty. Například když máme objekt person = { name: "Blanka", age: "21" }, tak name a age jsou "properties" objektu person. Hláška Cannot read properties of <něco> říká, že se v kódu snažíš přistoupit k property, kterou to něco mít nemůže, což speciálně v Javascriptu pravděpodobně znamená, že to něco neexistuje.
A to je i náš případ, protože to něco je ve skutečnosti undefined. Kdyby ta hláška skončila tady, tak by to pro nás zas tak užitečné nebylo, protože nevíme, co přesně z toho řádku je undefined a tak tu máme poslední nápovědu, text v závorce: (reading 'add'). Tím nám říká, že ta property, kterou nemůže přečíst, se jmenuje add.
index.jsx:18 Uncaught TypeError: Cannot read properties of undefined (reading 'add')
^^^^^^^^^
|_______|--- jméno souboru, kde je chyba
index.jsx:18 Uncaught TypeError: Cannot read properties of undefined (reading 'add')
^^
||--- řádek v souboru, kde je chyba
index.jsx:18 Uncaught TypeError: Cannot read properties of undefined (reading 'add')
^^^^^^^^^^^^^^^^^^
|________________|--- typ/kategorie chyby
index.jsx:18 Uncaught TypeError: Cannot read properties of undefined (reading 'add')
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
konkrétní chybová hláška ---|_________________________________________________|
A dál to můžeme rozebrat takhle:
Uncaught TypeError === nesedí typy proměnných. V Javascriptu bohužel trochu matoucí. K pochopení je nutné přečíst si celou chybovou hlášku.
Chybová hláška je
Cannot read properties of undefined (reading 'add')
^^^^^^^^^^^^^^^^^^^^^^^^^
|_______________________|--- popis konkrétního problému (`nemůžu přečíst (nějakou) property`)
Cannot read properties of undefined (reading 'add')
^^^^^^^^^
|_______|--- "tohle je ta věc, u který nemůžu přečíst property"
Cannot read properties of undefined (reading 'add')
^^^^^^^ ^^^^^
|_____|+|___|--- property, kterou se snažím přečíst, se jmenuje 'add'
Abychom pak mohli zanalyzovat tu konkrétní chybu, musíme vycházet z těhle informací.
Víme soubor (index.jsx) a řádek (18), tak se tam podíváme. Pravděpodobně tam je tohle:
? bulb.classList.add('bulb--on')
Teď už budeme muset aplikovat nějaké znalosti a zkušenosti. A dbát na dobré rady zkušenějších. Jedna taková dobrá rada je "přečti si tu chybovou hlášku vždycky nejdřív úplně celou do konce".
Uncaught TypeError je divná věc, které nerozumíme a nic moc nám sama o sobě neřekneme, budeme tedy číst dál.
Cannot read property of undefined už nám může dávát trochu smysl, protože víme co je property a tušíme, co je undefined. Na tom řádku (na první pohled) vidíme dvě věci, co můžou být property, classList a add, ale nevidíme tam žádný undefined.
Čteme dál: (reading 'add')
A jsme doma! Teď už je jasné, že k chybě došlo při pokusu o "načtení" property add, protože to něco, z čeho se tu property snažíme načíst, je undefined. My se tady to add snažíme načíst (přesněji v tomhle případě "zavolat", protože je to funkce) z bulb.classList. To může znamenat jen jednu věc - že bulb.classListjeundefined.
Už ale nevíme proč je undefined. S tím nám bohužel ta chybová hláška vůbec nijak nepomůže. Na to už budeme muset zapojit šedou kůru, fantazii, znalosti a zkušenosti.
Víme, že bulb je něco, co jsme si sami vytvořili - nejlepší je tedy začít tam, kde ten bulb vzniká.
Proč rovnou celý bulb a proč neřešíme bulb.classList? (nejméně) ze tří důvodů:
bulb jsme si vytvořili my, je tedy zdaleka nejpravděpodobnější, že k nějaké chybě došlo při vytváření
classList je property, o které víme že ji ten bulbmusí mít, pokud je vytvořen správně (samozřejmě po tom, co jsme si důkladně zkontrolovali překlepy 😉 )
ze zkušenosti časem budeme vědět, že tahle konkrétní chyba znamená, že bulb sice (v nějaké formě) existuje, ale bulb.classList už ne, což je v rozporu s bodem 2 a prakticky potvrzuje bod 1
To nám poměrně jasně naznačuje, že v bulb máme něco jiného, než co tam předpokládme. Konkrétně předpokládáme, že tam máme nějaký element. Každý element má property classList, náš bulb ale žádný classList nemá. Co s tím?
Podívejme se, jak bulb vzniká:
const bulb = document.querySelectorAll('.bulb');
Tady by nás mělo trknout, že děláme querySelectorAll(), který, už podle názvu, pravděpodobně bude vracet víc elementů najednou. Pokud si to z hlavy nepamatujeme*, podíváme se do dokumentace, kde se (mimo jiné) říká, že querySelectorAll() vrací pole elementů (array of elements), tudíž je jasné, že v proměnné bulb nemáme element, ale pole. A pole nemá property classList.
Jak to opravit? To už záleží na tom, čeho chceme dosánout. V tomhle případě chceme skutečně zpracovat všechny žárovky, tudíž chyba je primárně na řádku 18 (ale zároveň by bylo fajn tu proměnnou přejmenovat na bulbs) a musíme ji opravit tam. Pravěpodobně nějakým cyklem (např. forEach).
A po tom, co provedeme celou tuhle poměrně náročnou analýzu a syntézu, zjistíme, že to vlastně máme udělat úplně jinak a celý kód zahodíme. Vitejte ve světě programování! :)
*) nikdo po vás nikdy nebude chtít, abyste si všechno pamatovaly. Mnohem užitečnější je umět si informace najít
The text was updated successfully, but these errors were encountered:
Můj trochu delší příspěvek na slacku. Dávám sem, aby se to nezmizelo, můžeme z toho třeba někdy časem vyextrahovat něco přímo do lekce.
TypeError
velmi obecně naznačuje, že někde pravděpodobně nesedí typy proměnných. To je první indicie, která nás může navést správným směrem, byť zrovna v Javascriptu je chyba typuTypeError
spíš zavádějící, než užitečná.Naštěstí se tu chybu snaží vysvětlit hned v další větě:
Cannot read properties of <něco>
:Properties mají jen objekty. Například když máme objekt
person = { name: "Blanka", age: "21" }
, takname
aage
jsou "properties" objektuperson
. HláškaCannot read properties of <něco>
říká, že se v kódu snažíš přistoupit k property, kterou to něco mít nemůže, což speciálně v Javascriptu pravděpodobně znamená, že to něco neexistuje.A to je i náš případ, protože to něco je ve skutečnosti
undefined
. Kdyby ta hláška skončila tady, tak by to pro nás zas tak užitečné nebylo, protože nevíme, co přesně z toho řádku jeundefined
a tak tu máme poslední nápovědu, text v závorce:(reading 'add')
. Tím nám říká, že ta property, kterou nemůže přečíst, se jmenujeadd
.A dál to můžeme rozebrat takhle:
Uncaught TypeError
=== nesedí typy proměnných. V Javascriptu bohužel trochu matoucí. K pochopení je nutné přečíst si celou chybovou hlášku.Chybová hláška je
Abychom pak mohli zanalyzovat tu konkrétní chybu, musíme vycházet z těhle informací.
Víme soubor (
index.jsx
) a řádek (18
), tak se tam podíváme. Pravděpodobně tam je tohle:Teď už budeme muset aplikovat nějaké znalosti a zkušenosti. A dbát na dobré rady zkušenějších. Jedna taková dobrá rada je "přečti si tu chybovou hlášku vždycky nejdřív úplně celou do konce".
Uncaught TypeError
je divná věc, které nerozumíme a nic moc nám sama o sobě neřekneme, budeme tedy číst dál.Cannot read property of undefined
už nám může dávát trochu smysl, protože víme co jeproperty
a tušíme, co jeundefined
. Na tom řádku (na první pohled) vidíme dvě věci, co můžou být property,classList
aadd
, ale nevidíme tam žádnýundefined
.Čteme dál:
(reading 'add')
A jsme doma! Teď už je jasné, že k chybě došlo při pokusu o "načtení" property
add
, protože to něco, z čeho se tu property snažíme načíst, jeundefined
. My se tady toadd
snažíme načíst (přesněji v tomhle případě "zavolat", protože je to funkce) zbulb.classList
. To může znamenat jen jednu věc - žebulb.classList
jeundefined
.Už ale nevíme proč je undefined. S tím nám bohužel ta chybová hláška vůbec nijak nepomůže. Na to už budeme muset zapojit šedou kůru, fantazii, znalosti a zkušenosti.
Víme, že
bulb
je něco, co jsme si sami vytvořili - nejlepší je tedy začít tam, kde tenbulb
vzniká.Proč rovnou celý
bulb
a proč neřešímebulb.classList
? (nejméně) ze tří důvodů:bulb
jsme si vytvořili my, je tedy zdaleka nejpravděpodobnější, že k nějaké chybě došlo při vytvářeníclassList
je property, o které víme že ji tenbulb
musí mít, pokud je vytvořen správně (samozřejmě po tom, co jsme si důkladně zkontrolovali překlepy 😉 )bulb
sice (v nějaké formě) existuje, alebulb.classList
už ne, což je v rozporu s bodem 2 a prakticky potvrzuje bod 1To nám poměrně jasně naznačuje, že v
bulb
máme něco jiného, než co tam předpokládme. Konkrétně předpokládáme, že tam máme nějaký element. Každý element má propertyclassList
, nášbulb
ale žádnýclassList
nemá. Co s tím?Podívejme se, jak
bulb
vzniká:Tady by nás mělo trknout, že děláme
querySelectorAll()
, který, už podle názvu, pravděpodobně bude vracet víc elementů najednou. Pokud si to z hlavy nepamatujeme*, podíváme se do dokumentace, kde se (mimo jiné) říká, žequerySelectorAll()
vrací pole elementů (array of elements), tudíž je jasné, že v proměnnébulb
nemáme element, ale pole. A pole nemá propertyclassList
.Jak to opravit? To už záleží na tom, čeho chceme dosánout. V tomhle případě chceme skutečně zpracovat všechny žárovky, tudíž chyba je primárně na řádku 18 (ale zároveň by bylo fajn tu proměnnou přejmenovat na
bulbs
) a musíme ji opravit tam. Pravěpodobně nějakým cyklem (např.forEach
).A po tom, co provedeme celou tuhle poměrně náročnou analýzu a syntézu, zjistíme, že to vlastně máme udělat úplně jinak a celý kód zahodíme. Vitejte ve světě programování! :)
*) nikdo po vás nikdy nebude chtít, abyste si všechno pamatovaly. Mnohem užitečnější je umět si informace najít
The text was updated successfully, but these errors were encountered: