Variablennamen durch Variable bestimmen

[Rolf B]

Hallo af2111,

du hast ein Timing-Problem. Das load Event ist so gedacht, dass es auslöst, wenn eine Ressource geladen ist.

EIGENTLICH ist es ja so, dass JavaScript ausgeführt wird wenn der Browser darauf stößt, aber wenn ich eine Erklärung auf StackOverflow richtig verstanden habe, dann wird erst das Dokument geladen, dann feuert das load-Event für das Dokument, und dann beginnt die Verarbeitung des Dokuments.

Wie löst man das? Schauen wir, was weiter passiert. Der Browser interpretiert das HTML und führt dabei Script aus, das er findet. Er findet dein <script src="object.js"></script> und sagt: Ah, ein externes Script. Hey Server, schick mir das doch mal. Ich mach solange ein Päuschen.

Hallo, Server? Mir ist langweilig!

Huuuuhu!

Ah, danke Server. Mein objekt.cs ist da. Also, ein Script. Das führen wir mal aus. Es möchte das load Event auf dem Dokument behandelt. Gut, trage ich ein. Fertig.

OOPS! Guck oben. load auf dem Document ist schon längst gefeuert worden.

Ok, fertig, mein Dokument habe ich verstanden und das DOM draus gemacht (Document Object Model). Also feuere ich jetzt auf dem document das Event DOMContentLoaded und guck dann mal, was noch so an netten Bildern ankommt.

Alle Bilder da, die ich bestellt habe? Schön. Hey Browser, ich bin fertig!

Ok, sagt der Browser (genauer: das window Objekt), dann feuere ich jetzt mein load Event.

Alles klar?

Mache eins von diesen beiden:

• document.addEventListener("DOMContentLoaded", function() { ... })
• window.addEventListener("load", function() { ... })

DOMContentLoaded funktioniert, weil der Browser erst alle Scripte ausführt bevor dieses Event feuert. ES SEI DENN, das Script wurde mit der Option async geladen. Solche Scripte können auch noch nach DOMContentLoaded starten.

Zu deinem Bastel-Script noch ein paar Tipps:

1. Man kann in JavaScript mehrere Dinge in einem Befehl machen.

    let Vorname = document.getElementById("firstname");
    let Vornamenvalue = Vorname.value;

    let Nachname = document.getElementById("lastname");
    let Nachnamenvalue = Nachname.value;

    let Alter = document.getElementById("age");
    let Altervalue = Alter.value;

Da brauchst Du das Element nicht immer in einer Variablen zwischenzuparken. Eine Variable enthält einen Wert. Dieser Wert wurde von der Funktion geliefert. Du kannst den Funktionsauf deswegen direkt dahin schreiben, wo die Variable steht. Wert ist Wert. Ja ok, es ist nicht GANZ so einfach, es gibt ein paar Regeln in welcher Reihenfolge JavaScript dann was macht, aber wenn es um den Punkt-Operator geht, wird von links nach rechts ausgeführt.

    let Vornamenvalue = document.getElementById("firstname").value;
    let Nachnamenvalue = document.getElementById("lastname").value
    let Altervalue = document.getElementById("age").value;

Ein Objekt kann man als Block konstruieren (das nennt man ein Objekt-Literal):

let Daten = {
   Vorname: Vornamenvalue,       // hier ein Komma, kein Semikolon!
   Nachname: Nachnamenvalue,
   Alter: Altervalue
};

console.log(Daten.Vorname);
console.log(Daten.Nachname);
console.log(Daten.Alter);

Rolf