Sie sind hier � 247
Interaktion mit der Webseite
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Planeten</title>
<script>
var planet = document.getElementById("gruener_planet");
planet.innerHTML = "Roter Alarm: vom Phaser getroffen!";
</script>
</head>
<body>
<h1>Grüner Planet</h1>
<p id="gruener_planet">Alles in Ordnung</p>
<h1>Roter Planet</h1>
<p id="roter_planet">Nichts zu berichten</p>
<h1>Blauer Planet</h1>
<p id="blauer_planet">Alle Systeme OK</p>
</body>
</html>
Ein kleiner Probeflug
Nun können Sie mit document.getElementById auf ein Element zugreifen
und seinen Inhalt per innerHTML verändern. Das wollen wir jetzt auch tun.
Hier ist der HTML-Code für die drei Planeten. Der <head>-Teil enthält ein
<script>-Element, das den JavaScript- Code aufnimmt. Der <body> enthält
die drei Absätze mit dem grünen, roten und blauen Planeten. Falls Sie es
noch nicht getan haben, sollten Sie jetzt den HTML- und JavaScript-Code
eingeben, um das DOM zu aktualisieren:
Hier ist unser Skript
mit dem Code.
Hier ist das <p>-Element, das mit
JavaScript verändert werden soll.
Nach der Eingabe laden Sie die Seite im Browser, um zu
sehen, wie die Magie des DOM seine Wirkung entfaltet.
OH JE! Houston, wir haben ein
Problem. Der grüne Planet zeigt
immer noch »Alles ist Ordnung«.
Was stimmt hier nicht?
Wie schon gezeigt, holen wir uns
das <p>-Element mit der ID
»gruener_planet« und ändern
seinen Inhalt.
248 Kapitel 6
Überlegen, warum der code nicht funktioniert
Stimmt ja! Eine Sache haben wir Ihnen noch
nicht gesagt.
Bei der Arbeit mit dem DOM ist es wichtig, den Code erst auszu-
führen, nachdem die Seite vollständig geladen ist. Andernfalls existiert
das DOM bei der Ausführung Ihres Codes womöglich noch gar
nicht.
Folgendes ist passiert: Der Code steht im <head>-Teil der Seite,
das heißt, er wird schon ausgeführt, bevor der Browser die übrige
Seite überhaupt sieht. Das ist ein großes Problem, weil der Brow-
ser den Absatz mit der ID »gruener_planet« zu diesem Zeitpunkt
noch gar nicht offiziell kennt.
Und was passiert da genau? Der Aufruf von getElementById
gibt anstelle des gewünschten Elements null zurück, was zu einem
Fehler führt. Der Browser versucht, weiterzumachen und die Sei-
te trotzdem darzustellen, allerdings ohne die Änderung am Inhalt
des grünen Planeten.
Wir könnten versuchen, den Code ans Ende des <body> zu ver-
schieben, aber es gibt eine noch bessere Methode, dem Browser
zu sagen: »Führe meinen Code erst aus, wenn die Seite komplett
geladen und das DOM erstellt ist.« Das wollen wir uns als Nächs-
tes ansehen.
Ich habe mein Markup und
meinen Code dreimal überprüft,
und er funktioniert immer noch
nicht. Meine Seite will sich
einfach nicht ändern.
Werfen Sie beim
Laden der Seite
einen Blick auf die
Konsole. Die meisten
Browser geben eine
Fehlermeldung aus.
Daher eignet sich
die Konsole gut für
das Debugging.
Uncaught TypeError:
Cannot set property
'innerHTML' of null
JavaScript-Konsole
Get JavaScript-Programmierung von Kopf bis Fuß now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
