Wenn nichts gefunden wird

Was ist, wenn querySelector() nichts findet, zum Beispiel wegen eines Tippfehlers im Selektor? Dann gibt es null zurück: einen besonderen Wert, der „nichts“ bedeutet.

const preis = document.querySelector("#pries");
console.log(preis); // Gibt aus: null

null hat keine Eigenschaften, deshalb endet die nächste Zeile, die es benutzt, mit einem Fehler:

console.log(preis.textContent);

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

Die Meldung sagt: Ich kann die Eigenschaft textContent von null nicht lesen. Wenn du den Text stattdessen änderst, statt ihn zu lesen, lautet die Meldung etwas anders: TypeError: Cannot set properties of null (setting 'textContent'). Beide bedeuten dasselbe: Die Variable enthält null, weil das Element nicht gefunden wurde.

Der Fehler stoppt das Skript: Die Zeilen danach werden nicht ausgeführt. Die häufigsten Gründe, warum ein Element nicht gefunden wird, sind:

• ein Tippfehler im Selektor oder im HTML: "#pries" statt "#preis",
• ein fehlendes # oder ein fehlender Punkt: "preis" sucht ein Element mit dem Tag-Namen preis, und das gibt es nicht,
• Buchstaben, die nicht genau übereinstimmen: "#Preis" findet id="preis" nicht, und ".grosserPreis" findet class="grosser-preis" nicht,
• das Element script steht nicht am Ende von body, sodass die Elemente noch nicht existieren, wenn das Skript läuft.

Wenn du so einen Fehler siehst, gib das Element mit console.log() aus. Ist es null, vergleiche den Selektor Buchstabe für Buchstabe mit index.html.