Als Webentwickler/in wirst du bei der Arbeit mit JavaScript zwangsläufig auf Fehler stoßen. Codierungsfehler halten das Programm davon ab, das zu tun, was erwartet wird.

Um diese Fehler beheben zu können, musst du die Fehlermeldung verstehen, denn nur so kannst du nachvollziehen, warum der Fehler aufgetreten ist und wie du ihn beheben kannst.

In diesem Leitfaden sprechen wir über den Fehler „uncaught typeerror: cannot set property“ in JavaScript.

Du erfährst, warum dieser Fehler auftritt, aus welchen Gründen er auftreten kann und wie du ihn beheben kannst.

Was bedeutet „Uncaught Typeerror: Cannot Set Property“ in JavaScript bedeutet?

Ein typeerror tritt vor allem dann auf, wenn du eine Operation mit inkompatiblen Datentypen durchführst. In unserem Fall haben wir es mit dem Fehler „Uncaught Typeerror: Cannot Set Property“ zu tun, einem JavaScript-Fehler, der vor allem dann auftritt, wenn du versuchst, einem DOM-Element eine Eigenschaft mit einem null Wert zuzuweisen.

Dieser Fehler kann aus verschiedenen Gründen ausgelöst werden:

  • Platzierung des script Tags an der falschen Stelle in deinem Markup
  • Rechtschreibfehler beim Verweis auf DOM-Elemente
  • Zugriff auf ein undefiniertes oder ungültiges DOM-Element

In den folgenden Abschnitten gehen wir auf die oben genannten Gründe ein, erläutern, wie sie den Fehler „uncaught typeerror: cannot set property“ auslösen können, und zeigen, wie du den Fehler beheben kannst.

Wir werden auch darüber sprechen, wie du feststellen kannst, ob eine Variable null oder undefined ist.

Los geht’s!

Wie du den „uncaught typeerror: cannot set property“ in JavaScript behebst

In diesem Abschnitt lernst du die häufigsten Ursachen für die Fehlermeldung „uncaught typeerror: cannot set property“ in JavaScript kennen. Jeder folgende Unterabschnitt ist einer dieser Ursachen und ihrer Lösung gewidmet.

Außerdem erfährst du, wie du den Fehler mit einigen praktischen Codebeispielen beheben kannst.

Ungültige Platzierung des script Tags

Wenn eine Webseite geladen wird, wird auch der für die Seite geschriebene JavaScript-Code geladen. Die Art und Weise, wie JavaScript das Document Object Model (DOM) erkennt, hängt davon ab, wo du den script Tag in deinem Code platzierst.

Wenn du den script Tag innerhalb des head Tags oder über allen HTML-Elementen innerhalb des body Tags platzierst, wird das Skript ausgeführt, bevor das DOM bereit ist.

Wenn JavaScript ausgeführt wird, bevor das DOM bereit ist, erhält es keine vollständige Darstellung des DOM – das bedeutet, dass die meisten deiner Variablen, die mit DOM-Elementen verknüpft sind, als null zurückgegeben werden.

Hier ist ein Beispiel für einen Code, der in JavaScript aufgrund der Position des Tags script den Fehler „uncaught typeerror: cannot set property“ auslösen würde:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
    <script src="app.js"></script>
  </head>
  <body>
    <h1 id="heading"></h1>
  </body>
</html>

Im obigen Code befindet sich das Tag script innerhalb des Tags head. Außerdem haben wir ein h1 Element mit einem id von heading.

Als Nächstes werden wir versuchen, dem Element h1 Text zuzuweisen:

let heading = document.getElementById('heading');
heading.textContent = 'This is a heading';
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

Obwohl der Code oben gut aussieht, wurde der Fehler „uncaught typeerror: cannot set property“ ausgelöst. Das liegt daran, dass das Skript bereits vor dem DOM geladen wurde, sodass unser JavaScript keine Kenntnis von den DOM-Elementen hatte.

Dieser Fehler wird auch ausgelöst, wenn du das script Tag über anderen DOM-Elementen platzierst:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <script src="app.js"></script>
    <h1 id="heading"></h1>
  </body>
</html>

Jetzt steht das script Tag über den DOM-Elementen im body Tag, aber es wird immer noch den Fehler „uncaught typeerror: cannot set property“ auslösen, weil das Skript vor dem DOM geladen wird.

Um diesen Fehler zu beheben, musst du den script Tag direkt vor den schließenden body Tag setzen. Auf diese Weise werden alle DOM-Elemente vor dem Skript geladen.

Hier ist ein Beispiel für die richtige Platzierung:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <h1 id="heading"></h1>
    <script src="app.js"></script>
  </body>
</html>
let heading = document.getElementById('heading');
heading.textContent = 'This is a heading'

Wenn der obige Code ausgeführt wird, wird das Element h1 mit textContent auf „Dies ist eine Überschrift“ gesetzt. Es wird kein Fehler auftreten.

Rechtschreibfehler

Rechtschreibfehler sind eine weitere Ursache für die Fehlermeldung „uncaught typeerror: cannot set property“.

Wenn du das Attribut (ID oder Klasse), das zur Identifizierung eines DOM-Elements in JavaScript verwendet wird, falsch schreibst, verweist du auf ein nicht existierendes Element, das den Wert null zurückgibt.

Wenn du versuchst, einem null Wert einen Wert zuzuweisen, wird der Fehler „uncaught typeerror: cannot set property“ ausgelöst.

Hier ist ein Code-Beispiel, damit du es besser verstehst:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <h1 id="heading"></h1>
    <script src="app.js"></script>
  </body>
</html>
let heading = document.getElementById('headin');
heading.textContent = 'Hello World!'
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

Im obigen Code haben wir ein h1 Tag mit einem id von heading.

Im JavaScript-Code haben wir auf den id verwiesen, aber einen Rechtschreibfehler gemacht. Statt „heading“ haben wir „headin“ geschrieben – also document.getElementById('headin'); statt document.getElementById('heading');.

Um solche Fehler zu vermeiden, solltest du immer darauf achten, dass deine DOM-Elemente richtig referenziert werden, indem du das richtige Attribut mit der passenden Schreibweise verwendest.

Zugriff auf ein unbestimmtes DOM-Element

Im letzten Abschnitt haben wir gesehen, wie der Verweis auf ein falsch geschriebenes Attribut einen „uncaught typeerror: cannot set property“ Fehler auslösen kann. Das Gleiche gilt, wenn wir versuchen, auf ein DOM-Element zuzugreifen, das es nicht gibt.

Im folgenden Beispiel versuchen wir, auf ein id Attribut zuzugreifen, das im Markup noch nicht definiert ist:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <h1></h1>
    <script src="app.js"></script>
  </body>
</html>
let heading = document.getElementById('headin');
heading.textContent = 'Hello World!'
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

Wie oben zu sehen ist, versuchen wir, die textContent eines DOM-Elements zu setzen, das nicht existiert. Es gibt kein Element in unserem HTML-Code, das ein id von „heading“ hat, also gibt dies einen null Wert zurück.

Wenn du die Variable heading auf der Konsole ausgibst, erhältst du den Wert null zurück.

Wie du feststellst, ob eine Variable „null“ oder „undefiniert“ ist

Inzwischen hast du verstanden, dass die Zuweisung eines Wertes an eine Variable mit dem Wert null oder undefined höchstwahrscheinlich einen „uncaught typeerror: cannot set property“ Fehler auslöst.

Du kannst jedoch feststellen, ob eine Variable null oder undefined ist, bevor du mit ihr interagierst. Dadurch wird der Fehler zwar nicht behoben, aber es wird klar, warum eine Funktion nicht funktioniert.

Bevor wir besprechen, wie man in JavaScript feststellt, ob eine Variable null oder undefined ist, ist es wichtig, den Unterschied zwischen einem null und einem undefined Wert zu verstehen.

Eine Variable ist null, wenn der Variable ein leerer oder unbekannter Wert zugewiesen wird. Die vorangegangenen Abschnitte dieses Leitfadens zeigen praktische Beispiele für eine null Variable.

Andererseits ist eine Variable undefined, wenn ihr kein Wert zugewiesen wurde:

let age;
console.log(age);
// undefined

Im obigen Code wurde die Variable age deklariert, aber es wurde ihr kein Wert zugewiesen. Bei der Ausgabe auf der Konsole wurde undefined zurückgegeben.

Da du nun den Unterschied zwischen null und undefined kennst, schauen wir uns an, wie du feststellen kannst, ob eine Variable eine von beiden ist.

Du kannst den losen Gleichheitsoperator (==) verwenden, um festzustellen, ob eine Variable entweder null oder undefined ist. Hier ist ein Beispiel:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <h1 id="headin"></h1>
    <script src="app.js"></script>
  </body>
</html>
let heading = document.getElementById('headin');
if (heading == null) {
console.log('Variable is null - cannot assign value to a null variable');
} else {
heading.textContent = 'Hello World!';
}

Im obigen Code haben wir einen Rechtschreibfehler gemacht, als wir ein DOM-Element in JavaScript referenziert haben.

Mit der Anweisung if haben wir überprüft, ob der Wert der Variable heading null ist: if (heading == null) {...}

Da sie einen null Wert zurückgab, wurde in der Konsole „Variable ist null – kann einer null-Variablen keinen Wert zuweisen“ ausgegeben. Hätten wir keinen null Wert erhalten, wäre der Code im else Block ausgeführt worden.

Wenn du dich fragst, warum wir undefined nicht in die if Anweisung aufgenommen haben, liegt das daran, dass null == undefined in JavaScript enthalten ist und der Code in der if Anweisung auf beide Fehler prüft.

Zusammenfassung

Fehlermeldungen können in manchen Fällen verwirrend sein, aber sie helfen Entwicklern herauszufinden, warum ihr Code nicht funktioniert, damit sie Fehler beheben und zukünftige vermeiden können.

Obwohl niemand Fehler mag, sind sie eine gute Möglichkeit, deine Lieblingssprache besser zu verstehen.

Außerdem verschafft dir die Behebung eines Programmierfehlers mehr Kontext, wenn du in einem anderen Projekt auf einen ähnlichen Fehler stößt. Der Fehler, den wir in diesem Artikel besprochen haben, tritt nicht nur bei der Arbeit an Vanilla-JavaScript-Projekten auf – er kann auch bei der Arbeit mit JavaScript-Frameworks und -Bibliotheken auftreten.

Wenn du eine Anwendung oder eine Website erstellen willst, musst du eine Vielzahl von Fähigkeiten erlernen und viel üben, um diese Fähigkeiten effizient einzusetzen. Das neue Hobby-Tier von Kinsta bietet die perfekte Hosting-Plattform für alle, die einen Platz zum Üben brauchen – von angehenden Programmierern bis hin zu erfahrenen Entwicklern, die ihre Arbeit bekannt machen oder Proof-of-Concept-Anwendungen entwickeln wollen. Und wenn du dich heute für eine beliebige Stufe anmeldest, bekommst du $20 Rabatt auf deinen ersten Monat.