Websiteentwicklung: JavaScript: Häufige Fehler

<< Ereignisbehandlung im Dokument-Objekt-Modell | Inhaltsverzeichnis| Index | Entwurfsmuster >>

Diese Troubleshooting-Seite enthält eine Übersicht über Probleme, die beim Programmieren häufig auftreten, und gibt Hinweise, woran es liegen könnte und wie man das Problem löst.

Grundlegende Probleme

Problem:

JavaScript startet beim Laden des HTML-Dokuments nicht.

Mögliche Ursachen:

Hauptursache Nr. 2: fehlerhafte Verbindung zwischen JS-Datei und HTML-Dokument

Hauptursache Nr. 1: Flüchtigkeitsfehler im Code. Beispiele:

defekte Kommentierung, z.B. ein verwaistes */ ohne Gegenstück
eine verwaiste Klammer {, [, ( ohne Gegenstück
ein fehlerhaftes Semikolon, z.B. irrtümlich : statt ;
ein irrtümlich herumstehender Buchstabe, der nicht zum Code gehört (passiert z.B. wenn man statt control+v [Shortcut für Einfügen] versehentlich ein v eintippt)

ein defektes Array, z.B.:
- in der Arraydefinition wurde das „=“ vergessen
- unvollständige eckige Klammern (z.B. meinArray[5 [0])
- Syntaxfehler in den eckigen Klammern (z.B. meinArray[meineVariable+])

ein defekter String
- unvollständige Anführungszeichen
- ein fehlendes +-Zeichen in einem zusammengesetzten String

eine defekte Funktion
- fehlende () in der Funktionsdeklaration
- das Programm ruft beim Laden eine Funktion auf, die nicht deklariert ist

ein defektes logisches Statement
- ein fehlerhafter Operator (z.B. = statt ==)
- for-Statement, in dessen ()-Teil versehentlich mehrere Zählervariablen vorkommen
- for-Statement, in dessen {}-Teil versehentlich nicht der Name der Zählervariablen aus dem ()-Teil, sondern irgendein anderer Variablenname verwendet wird
- ein verwaistes else-Statement ohne if-Statement
- ein do-while-Statement ohne {} nach dem do-Statement

Bei JavaScript können bereits kleinste Syntaxfehler (Flüchtigkeitsfehler), die sich oft an vollkommen ungeahnter Stelle befinden, das Programm so lahmlegen, dass es gar nicht erst startet. Wenn man keinen Debugger hat, hilft es, den gesamten Code per /* */ in vorübergehenden Schlaf zu legen und nur einen Hallo-Welt-Alert stehenzulassen. Falls dieser funktioniert, kann man den Fehler, der sich irgendwo im Code versteckt, einkreisen, indem man den Code Absatz für Absatz ent-kommentiert und prüft, ob das Script bzw. der Hallo-Welt-Alarm immer noch läuft.

Probleme mit Funktionen

Problem:

Funktion wird nicht ausgeführt.

Mögliche Ursachen:

Funktionsname enthält (entweder in der Deklaration oder im Aufruf) einen Schreibfehler.
Die Funktion wird mit Parameter aufgerufen, ist aber mit leerer Klammer deklariert; oder umgekehrt.
Die Funktion ruft eine weitere Funktion auf, die nicht definiert ist.

Problem:

Funktion wird nicht vollständig ausgeführt.

Mögliche Ursache:

Im {}-Teil der Funktionsdeklaration wird eine Variable nachgefragt, die nicht als Parameter aufgeführt ist. Wenn dies der Fall ist, bricht die Ausführung der Funktion an dieser Stelle ab.

Probleme mit konditionalen Statements

Problem:

if-Statement oder do..while-Statement haut daneben.

Mögliche Ursachen:

Variable, deren Wert 0 ist, wird als undefiniert gelesen. Therapie: entweder die Variable sanieren oder das if-Statement entsprechend verfeinern.
Variable ist von einem anderen Typ als erwartet. Diagnose: mit typeof() testen.
Im {}-Teil des Statements befindet sich irgendwo ein Syntax-Fehler oder ein Verweis auf ein defektes Element des Gesamtskripts (z.B. auf eine fehlerhaft definierte Variable oder ein fehlerhaft definiertes Array).

Probleme mit Formularfeldern

Problem:

Funktion focus() funktioniert nicht.

Mögliche Ursache:

Das Fenster hat das Attribut „readonly“.

Probleme mit Schaltern und klickbaren Elementen

Problem:

Schalter reagiert nicht.

Mögliche Ursachen:

Kein Event-Handler vorhanden (z.B. versehentlich wegkommentiert).
Der Schalter wird über eine ID oder einen Namen aufgerufen, der irrtümlich mehrmals vergeben wurde.

Problem:

Schalter reagiert beim Anklicken falsch.

Mögliche Ursache:

Der Schalter liegt in einem klickbaren Bereich, z.B. in einer klickbaren Tabellenzelle. Es wird dann das Programm für die Tabellenzelle ausgeführt und nicht das für den Schalter.

Probleme mit Variablen- und Arraywerten

Problem:

Variable enthält falsche/unerwartete Zahlen.

Mögliche Ursache:

Die Variable enthält nicht eine Number, sondern einen String. Das passiert Anfängern in JavaScript unentwegt. Diagnose: den Variablenwert mit der typeof()-Funktion testen; einen String kann man dann mit parseInt() in eine Zahl umwandeln.

Problem:

Wert in einem Array wird fehlerhaft als undefined angezeigt.

Mögliche Ursache:

Syntaxfehler im Aufruf des Wertes (z.B. statt „meinArray[meineVariable+2]“ irrtümlich „meinArray[+2]“)

Probleme mit Strings

Problem:

Statt eines Strings wird (z.B. in einer alert()-Meldung) nur „NaN“ angezeigt.

Mögliche Ursache:

Syntaxfehler im String (z.B. fehlende Umklammerung eines Rechenarguments). Passiert leicht bei komplexen Strings, die aus Text und Variablen zusammengesetzt sind.

Problem:

Es wird überhaupt kein Text ausgegeben (z.B. in einem Formularfeld).

Mögliche Ursache:

Syntaxfehler im String (z.B. wenn der String eine Variable enthält, auf die an dieser Stelle kein Zugriff möglich ist).

Probleme mit Objekt-Eigenschaften

Problem:

Es gelingt nicht, eine Eigenschaft (Property) eines Objekts zu verändern (z.B. die CSS-class eines Formularelements).

Mögliche Ursache:

Die Groß-/Kleinschreibung wurde nicht beachtet. Die Schreibung von Eigenschaften ist case-sensitive. Wenn man statt className classname schreibt, scheitert der Zugriff auf diese Eigenschaft.

Problem:

Steuerung der className-Eigenschaft funktioniert nicht.

Mögliche Ursache:

Falscher class-Name angegeben. Einen Blick in die CSS-Datei werfen.

<< Ereignisbehandlung im Dokument-Objekt-Modell | Inhaltsverzeichnis| Index | Entwurfsmuster >>