Hallo,
Weil wenn ich eine globale Variable definiere, welche sich auf ein Div bezieht, sprich zB.: var ballmove = document.getElementById("ballmove");
scheint es als würde er nicht korrekt auf das Objekt referenzieren.
Browser lesen ein HTML-Dokument von vorne bis hinten ein (genannt Parsing) und führen dabei sofort den JavaScript-Code aus, den sie in script-Elementen finden oder der mit <script src> verlinkt wurde. Das Laden und Ausführen des JavaScripts hält dabei das Parsing an.
Das hat zum Effekt, dass ein Script nur auf Elemente zugreifen kann, die im Quelltext vor dem zugehörigen script-Element stehen.
Wenn du also mit getElementById ein Element ansprichst, was nach dem script-Element kommt, so wird es nicht gefunden.
Erst wenn ich im body die Funktion onload aufrufe (zB.: onload = init()) und über die Funktion init auf das Objekt referenziere, funktioniert es korrekt.
Beim load-Ereignis ist das gesamte Dokument eingelesen und du hast Zugriff auf das gesamte DOM.
In der Regel werden Scripte daher
- ans Ende des Dokuments gesetzt, damit alle Elemente eingelesen wurden,
- und/oder beim load-Ereignis oder besser beim DOMContentLoaded-Ereignis gestartet.
Siehe:
http://molily.de/js/einbindung.html
http://molily.de/js/event-handling-onload.html
Mathias