getElementByID füllt nichts hinein

KasselJulian · 14.01.2013

Hallo,

ich möchte mithilfe eines JavaScripts einem Input einen Wert verpassen.
Mein Script:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script>
document.getElementById('hallo').value = "hallo Welt";
</script>
</head>
<body>
<input type="text" id="hallo" />
</body>
</html>

Leider wird die Value nicht gesetzt. Woran liegt das?

Lg

Myhar · 14.01.2013

AW: getElementByID füllt nichts hinein

Ganz einfach: JS wird in dem Moment ausgeführt, in dem es auf der Seite erscheint. Zum Zeitpunkt deines JS steht folgendes auf deiner Seite:

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script>
document.getElementById('hallo').value = "hallo Welt";

Aus diesem HTML Dokument sucht es sich das Element mit der id hallo heraus, findet logischerweise nichts und gibt auch keinem Element den value "hallo Welt".
Danach wird erst der Rest des Dokuments geladen.
Deshalb solltest du dein JS erst dann ausführen, wenn die Seite komplett geladen ist (onload)
Bei einfachen Seiten (wie deiner) reicht es, window.onload zu verwenden.

HTML:

window.onload = function () {
      alert("LOADED!");
}

Dabei ist zu beachten, dass window.onload erst ausgeführt wird, wenn wirklich alles (Bilder, skripte, etc) fertig geladen sind. Dadurch dauert es zwar etwas länger, aber gerade beim lernen können so weniger Fehler entstehen, da auch wirklich alle Ressourcen vorhanden sind.
Wenn du dann eine "richtige" Seite erstellst, empfiehlt sich, auf DOMReady zu überprüfen, um DOM Manipulationen vorzunehmen. Für Übungsseiten aber deshalb nicht zu empfehlen, da es nicht unbedingt einfach ist, das auf verschiedene Browser abzustimmen.

KasselJulian · 14.01.2013

Myhar schrieb:
Ganz einfach: JS wird in dem Moment ausgeführt, in dem es auf der Seite erscheint. Zum Zeitpunkt deines JS steht folgendes auf deiner Seite:

HTML:

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unbenanntes Dokument</title> <script> document.getElementById('hallo').value = "hallo Welt";

Aus diesem HTML Dokument sucht es sich das Element mit der id hallo heraus, findet logischerweise nichts und gibt auch keinem Element den value "hallo Welt".
Danach wird erst der Rest des Dokuments geladen.
Deshalb solltest du dein JS erst dann ausführen, wenn die Seite komplett geladen ist (onload)
Bei einfachen Seiten (wie deiner) reicht es, window.onload zu verwenden.

HTML:

window.onload = function () { alert("LOADED!"); }

Dabei ist zu beachten, dass window.onload erst ausgeführt wird, wenn wirklich alles (Bilder, skripte, etc) fertig geladen sind. Dadurch dauert es zwar etwas länger, aber gerade beim lernen können so weniger Fehler entstehen, da auch wirklich alle Ressourcen vorhanden sind.
Wenn du dann eine "richtige" Seite erstellst, empfiehlt sich, auf DOMReady zu überprüfen, um DOM Manipulationen vorzunehmen. Für Übungsseiten aber deshalb nicht zu empfehlen, da es nicht unbedingt einfach ist, das auf verschiedene Browser abzustimmen.

Logisch. Danke!

Eine Frage dazu noch:

window.onload = function () { alert("LOADED!"); }Wenn ich jetzt z.B. eine JavaScript-Datei erst bei onLoad ausführen möchte, auf die ich bisher mit script src="" ... verwiesen habe, wie ist das mit deinem Beispiel zu realisieren?
Zum Beispiel:

Code:

<script type="text/javascript" src="js/example.js">
// File soll absofort erst bei onLoad geladen werden
</script>

Myhar · 14.01.2013

AW: getElementByID füllt nichts hinein

Das kannst du nur im JS File selber definieren. In der Datei example.js muss der onload Teil also selber definiert werden. Wenn man 2 js Dateien einbindet, dann kann jede js Datei einen onload Teil haben, die werden dann zusammengefügt.

by the way: Du brauchst nicht jedesmal meinen Beitrag komplett zitieren

KasselJulian · 14.01.2013

AW: getElementByID füllt nichts hinein

Ich möchte dich noch um eines fragen

Folgendes:
Ich habe ein Script das HTML-Elemente nach 1,5 Sekunden des Aufrufs erstellt (mit jQquery setTimeout). Dieser Timeout wird bei meinem window onload event aber nicht berücksichtigt. Sprich ich habe mein Onload-Event, dass trotz dass das jQuery-setTimeout-Event noch nicht abgelaufen ist (sprich die 1,5 Sekunden noch nicht vergangen sind) schon ausgeführt wird.
Kann ich das umgehen?
LG

Duddle · 14.01.2013

AW: getElementByID füllt nichts hinein

Beide Dinge (das Script + dein eigener Event-Handler) laufen parallel ab. Wenn du das nicht willst, musst du eines vom anderen starten lassen.

Duddle

KasselJulian · 14.01.2013

AW: getElementByID füllt nichts hinein

Duddle schrieb:
Beide Dinge (das Script + dein eigener Event-Handler) laufen parallel ab. Wenn du das nicht willst, musst du eines vom anderen starten lassen.

Duddle

Danke!

Das probierte ich vorhin schon einmal, aber scheinbar an der falschen Stelle, denn es bewirkte nichts. Ich habe es direkt nach meinem Code der die HTML-Elemente erzeugt eingeschrieben, sprich innerhalb der Timout-Funktion und nach der Erzeugung der Elemente auf die sich der onLoad-Code bezieht.
Habe ich da was übersehen?

Beispiel:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript">
$(document).ready(function(){
    setTimeout(function(){
            $("#elemente").load('datei.html', function(responseTxt,status,xhr){
                    if(status != "success"){
                        $("#elemente").html('Fehler');
                    }
                    // Hier kommt mein JavaScript hinein, welches die Elemente, die anhand der datei.html
                    // in #elemente geladen wurden, verändert
                    // z.B. bei Bezug auf ein Input-Feld
                    window.onload = function(){
                        document.getElementById('ID_DIE_IN_DATEI_HTML_VORHANDEN_IST').value = "testvalue";    
                    }
            });
    }, 1500);
});
</script>
</head>
<body>
<div id="elemente">

</div>
</body>
</html>

Duddle · 14.01.2013

AW: getElementByID füllt nichts hinein

In deinem Auszug fehlt das eingebundene jQuery, aber das zähle ich mal als Schusselfehler.

Warum willst du dort ein window.onload machen?
Möchtest du das Zeug ausführen / die Werte ändern, wenn datei.html erfolgreich geladen wurde? Falls ja, dann brauchst du das nicht nochmal abfragen, da die Funktion die du an load() übergibst doch schon die Callback-Funktion für einen abgeschlossenen Request darstellt. Die Datei ist dann also definitiv geladen (es sei denn, status ist nicht "success").

Duddle

KasselJulian · 14.01.2013

AW: getElementByID füllt nichts hinein

Duddle schrieb:
In deinem Auszug fehlt das eingebundene jQuery, aber das zähle ich mal als Schusselfehler.

Warum willst du dort ein window.onload machen?
Möchtest du das Zeug ausführen / die Werte ändern, wenn datei.html erfolgreich geladen wurde? Falls ja, dann brauchst du das nicht nochmal abfragen, da die Funktion die du an load() übergibst doch schon die Callback-Funktion für einen abgeschlossenen Request darstellt. Die Datei ist dann also definitiv geladen (es sei denn, status ist nicht "success").

Duddle

Hi,

das dachte ich auch. Der Status ist zwar success, die Elemente werden jedoch trotzdem nicht gefunden.

Duddle · 14.01.2013

AW: getElementByID füllt nichts hinein

Dann hast du einen anderen Fehler drin. Bei mir funktioniert es wie erwartet. Sagt Firebug irgendwas?

Duddle