Möchte man mit Javascript und dem Befehl document.getElementById auf bestimmte Elemente einer Webseite zugreifen, kann es schnell zu einem Fehler kommen: Das Skript funktioniert nicht und der Browser meldet über die Fehlerkonsole den Fehler “TypeError: document.getElementById(…) is null”. Wenn es kein Tippfehler ist und das Webseiten-Element den gleichen Namen hat, auf den man mit getElementById() zugreift, liegt es sehr wahrscheinlich an der Platzierung des Javascript.
Hat man, ganz klassisch, das Javascript im <head> Bereich der Webseite definiert, kann es schnell zu demTypeError Fehler kommen – dabei ist es ganz egal, ob das Skript “inline” direkt in die Seite geschrieben wurde oder als externes Skript eingeladen wird: Solange das Webseiten-Element, auf dessen ID man zugreifen möchte, nicht vorhanden ist, ist der Wert von “document.getElementById()” = “null”: Man kann nicht darauf zugreifen.
Lösung: So umgeht man den TypeError!
Die Lösung ist dabei sehr einfach: Das Javascript darf nicht bereits im <head> Bereich der Seite stehen, sondern muss NACH dem Element eingebaut werden, auf das man zugreifen möchte – das kann dann zum Beispiel so aussehen wie in unserem einfachen Javascript-Fader:
<html>
<head>
<style type="text/css">
body { background-color:#000;color:#FFF; }
#hgr { width:800;height:480;position:absolute;top:0;left:0; }
#logo { width:688;height:226;position:absolute;top:146px;left:56px; }
</style>
</head>
<body>
<div id="hgr"></div>
<div id="logo"></div>
<script type="text/javascript">
function fader(wert) {
var i = wert;
if(i > 1) {
var h = document.getElementById("hgr");
h.style.opacity = "0."+i;
i = i - 1;
setTimeout("fader("+i+")",100);
}
}
window.onload = fader(99)
</script>
</body>
</html>