Když se nic nenajde

Co když querySelector() nic nenajde, třeba kvůli překlepu v selektoru? Pak vrátí null: zvláštní hodnotu, která znamená „nic“.

const cena = document.querySelector("#cenna");
console.log(cena); // Vypíše: null

null nemá žádné vlastnosti, takže další řádek, který ho použije, skončí chybou:

console.log(cena.textContent);

TypeError: Cannot read properties of null (reading 'textContent')

Hláška říká: nelze přečíst vlastnost textContent hodnoty null. Když text místo čtení měníte, je hláška trochu jiná: TypeError: Cannot set properties of null (setting 'textContent'). Obě znamenají totéž: v proměnné je null, protože se prvek nenašel.

Chyba skript zastaví: řádky za ní se už neprovedou. Nejčastější důvody, proč se prvek nenajde, jsou:

• překlep v selektoru nebo v HTML: "#cenna" místo "#cena",
• chybějící # nebo tečka: "cena" hledá prvek s tagem cena a takový na stránce není,
• jinak zapsaný název: "#Cena" nenajde id="cena" a ".velkaCena" nenajde class="velka-cena",
• prvek script není na konci body, takže když se skript spustí, prvky ještě neexistují.

Když takovou chybu uvidíte, vypište si prvek pomocí console.log(). Pokud je to null, porovnejte selektor s index.html písmeno po písmenu.