So behebst du den Fehler „uncaught typeerror: cannot read property“ in JavaScript

Fehler sind ein wichtiger Bestandteil beim Erlernen und Anwenden jeder Programmiersprache. Fehlermeldungen helfen dir zu verstehen, was irgendwo in deinem Code schief gelaufen ist.

Während einige Fehlermeldungen einfach und leicht zu verstehen sind, können andere ein wenig verwirrend sein, wenn du sie das erste Mal siehst.

In diesem Leitfaden werden wir über einen der häufigsten JavaScript-Fehler sprechen – den „uncaught typeerror: cannot read property“-Fehler.

Am Ende dieses Tutorials solltest du wissen, was der Fehler „uncaught typeerror: cannot read property“ bedeutet, was die häufigsten Ursachen sind und wie du sie beheben kannst.

Was bedeutet „uncaught typeerror: cannot read property“ in JavaScript?

Der Fehler „uncaught typeerror: cannot read property“ tritt vor allem dann auf, wenn du versuchst, eine undefined Variable zu verwenden oder darauf zuzugreifen. Dieser Fehler kann auftreten, wenn du Vanilla JavaScript oder ein Javascript-Framework verwendest.

Du kannst Fehler beim Programmieren leicht erkennen, indem du verschiedene Entwickler-Tools wie die Chrome Dev Tools und das Kinsta One-Click Staging Tool verwendest, um Fehler abzufangen, deinen Code zu testen und vieles mehr.

So behebst du den Fehler „uncaught typeerror: cannot read property“ in JavaScript

In den folgenden Abschnitten zeigen wir dir einige Ursachen für den Fehler „uncaught typeerror: cannot read property“ und wie du sie anhand von Codebeispielen beheben kannst.

Zugriff auf eine Objekteigenschaft mit dem Wert „Undefined“

In diesem Abschnitt besprechen wir eine der möglichen Ursachen für den Fehler „uncaught typeerror: cannot read property“ in JavaScript. Dies hat mit dem Zugriff auf eine Objekteigenschaft zu tun, die noch nicht definiert ist.

Hier ist ein Beispiel:

let person;

In dem obigen Code haben wir eine Variable namens person erstellt. Diese Variable soll ein Objekt mit Eigenschaften wie name, age, hobby sein.

Angenommen, du vergisst, diese Eigenschaften zu erstellen, dann bekommst du einen Fehler, wenn du versuchst, auf sie zuzugreifen. Und zwar:

let person;
console.log(person.name);
// Uncaught TypeError: Cannot read properties of undefined (reading 'name')

Wie oben zu sehen ist, haben wir versucht, auf die Eigenschaft name zuzugreifen, die nicht existiert, so dass wir eine Fehlermeldung erhalten: „uncaught typeerror: cannot read property“.

Das kann jedem passieren, weil du vielleicht vergessen hast, Eigenschaften zu deinem Objekt zu erstellen/hinzuzufügen.

Fügen wir dem Objekt einige Eigenschaften hinzu, um den Fehler zu beheben:

let person = {
  name: "John",
  age: 200,
  hobby: "coding"
}
console.log(person.name);
// John

Im obigen Code haben wir die Eigenschaft name hinzugefügt. Wenn du versuchst, darauf zuzugreifen, bekommst du den Wert „John“ zurück.

Auf ein Element zugreifen, das nicht in einem Array vorhanden ist

Genau wie bei den Objekten im letzten Abschnitt bekommst du auch den Fehler „uncaught typeerror: cannot read property“, wenn du versuchst, auf ein Element in einem Array zuzugreifen, das noch nicht initialisiert wurde.

Hier ist ein Beispiel:

let arr;
console.log(arr[0]);
// Uncaught TypeError: Cannot read properties of undefined (reading '0')

Im obigen Beispiel haben wir versucht, auf das erste Element eines Arrays namens arr zuzugreifen.

Das Array wurde zwar deklariert, aber nicht initialisiert – das bedeutet, dass ihm noch kein Element zugewiesen wurde.

Um das zu ändern, fügen wir dem Array Elemente hinzu, bevor wir auf sie zugreifen. Das heißt:

let arr = [2,4,6,8]
console.log(arr[0]);
// 2

Zugriff auf ein DOM-Element, das es nicht gibt

Wenn du mit dem Document Object Model (DOM) in JavaScript arbeitest, kann es passieren, dass du auf den „uncaught typeerror: cannot read property“ stößt.

Das kann aus verschiedenen Gründen passieren, z. B. wegen eines Rechtschreibfehlers beim Verweis auf ein DOM-Element, beim Zugriff auf ein Element, das nicht existiert, oder beim Zugriff auf ein Element, bevor das DOM geladen wurde (darüber sprechen wir im nächsten Abschnitt).

In diesem Abschnitt siehst du ein Beispiel, das den Fehler „uncaught typeerror: cannot read property“ für den Zugriff auf ein nicht vorhandenes DOM-Element auslöst.

Hier ist der HTML-Code:

<!DOCTYPE html>
<html>
  <head>
    <title>Error Tutorial</title>
  </head>
  <body>
    <h1 id="content">Hello World!</h1>
    <script src="app.js"></script>
  </body>
</html>

Im obigen Code haben wir ein einfaches HTML-Dokument mit einem h1 Element mit der ID „content“ erstellt.

Hier ist der JavaScript-Code:

let content = document.getElementById("constent");
console.log(content.textContent);
// Uncaught TypeError: Cannot read properties of null (reading 'textContent');

Der obige Code löst den Fehler „uncaught typeerror: cannot read property“ aus, obwohl es so aussieht, als hätten wir alles richtig gemacht.

Es ist ziemlich leicht zu übersehen, was diesen Fehler auslöst. Er wird ausgelöst, weil wir „constent“ statt „content“ geschrieben haben, während wir die ID des Elements h1 referenziert haben.

Das heißt, document.getElementById("constent"); statt document.getElementById("content");.

Derselbe Fehler tritt auf, wenn du versuchst, auf eine ID oder einen Klassennamen zu verweisen, der noch nicht im DOM erstellt wurde.

Um diesen Fehler zu beheben, kannst du einfach nach Rechtschreibfehlern suchen oder sicherstellen, dass das Element, auf das verwiesen wird, tatsächlich im DOM existiert.

Das Skript-Element über anderen DOM-Elementen innerhalb des Body-Tags platzieren

Die Position deines script Elements bestimmt, wie dein JavaScript-Code im Browser ausgeführt wird.

Wenn du das script Element über jedem anderen Element im Body deines HTML-Dokuments platzierst, wird der JavaScript-Code ausgeführt, bevor das DOM geladen wurde.

Das bedeutet, dass JavaScript keinen Verweis auf die DOM-Elemente hat, weil es nicht darauf gewartet hat, dass sie geladen werden, bevor es ausgeführt wird.

Hier ist ein Beispiel:

<!DOCTYPE html>
<html>
  <head>
    <title>Error Tutorial</title>
  </head>
  <body>
    <script src="app.js"></script>
    <h1 id="content">Hello World!</h1>
  </body>
</html>

Im obigen Code haben wir das Element script über dem Element h1 platziert.

Hier ist der JavaScript-Code, in dem wir versuchen, über die ID des Elements h1 auf dieses zu verweisen:

let content = document.getElementById("content");
console.log(content.textContent);
// Uncaught TypeError: Cannot read properties of null (reading 'textContent');

Wie erwartet wurde uns der Fehler „uncaught typeerror: cannot read property“ angezeigt, weil der JavaScript-Code vor dem Element h1 im DOM registriert werden konnte.

Um dieses Problem zu beheben, musst du dein script-Element immer vor dem schließenden body-Tag einfügen, d. h. unter jedem anderen DOM-Element im Body des Dokuments. Auf diese Weise wird das Skript erst ausgeführt, nachdem jedes Element im DOM geladen wurde.

<!DOCTYPE html>
<html>
  <head>
    <title>Error Tutorial</title>
  </head>
  <body>
    <h1 id="content">Hello World!</h1>
    <script src="app.js"></script>
  </body>
</html>

Zusammenfassung

Fehler sind ein unvermeidbarer Teil der Arbeit eines Entwicklers. Sie können dich beim Programmieren frustrieren, aber sie können dir auch helfen, mehr zu lernen und die Programmiersprache zu beherrschen, die du verwendest.

Wenn du mit einem Fehler konfrontiert wirst, solltest du immer versuchen, die Fehlermeldung zu verstehen, denn so weißt du, wo du anfangen und was du beheben musst. So kannst du auch andere Fehler mit ähnlichen Fehlermeldungen beheben.

Wenn du eine Website erstellen willst, musst du eine Vielzahl von Fähigkeiten erlernen und viel üben, um diese Fähigkeiten effizient einzusetzen. DevKinsta erleichtert den Prozess vom Entwurf über die Entwicklung bis hin zur Bereitstellung auf deinem lokalen Rechner. DevKinsta wird von über 25.000 Entwicklern, Webdesignern und Freiberuflern genutzt. Probiere es noch heute kostenlos aus.