Variablennamen durch Variable bestimmen

[Rolf B]

Hallo af2111,

zu deiner ursprünglichen Frage: Was Du da suchst, ist ein Ding, das sich Array nennt (englisch für eine Anordnung mehrerer Dinge). Deutsche Bücher sprechen auch schon mal von einer Tabelle oder einem Feld. Was verwirren kann, weil man bei einer Tabelle an ein Ding mit Zeilen und Spalten denkt, ein JavaScript Array aber nur eine Richtung hat. Und ein "Feld" ist noch schlimmer, das verwenden andere Programmiersprachen mit ganz anderen Bedeutungen.

Also, das Ding ist ein Array, die JavaScript-Klasse dazu heißt auch so, darum übersetzen wir das besser nicht.

Stell Dir ein Array wie einen Kistenstapel vor. Der ganze Stapel passt in EINE Variable. Und die Kisten sind durchnummeriert, von 0 ganz unten, dann 1, 2, 3 bis oben.

Du hast mehrere Möglichkeiten, JavaScript zu sagen dass Du ein Array willst:

let arr1 = [];
let arr2 = new Array();
let arr3 = [ 4, 7, "self", false ];
console.log(arr1.length);
console.log(arr3.length);

Das erzeugt in arr1 und arr2 ein leeres Array (blöd, ja, ein Stapel ohne Kisten. Also gut, ein Platz, der für einen Kistenstapel freigehalten wird). In arr3 wird ein Stapel aus 4 Kisten erzeugt. Kiste 0 bekommt die 4, Kiste 1 die 7, Kiste 2 ein "self" und Kiste 3 den logischen Wert false. Ein Array hat eine Eigenschaft namens length (Länge), die angibt, wieviele nummerierte Kisten es hat. Die Log-Aufrufe geben also 0 und 4 aus.

Warum heißt das Stapel? Naja, JavaScript stellt Dir Kisten dazu wenn es nötig ist.

let arr1 = [];
arr1[6] = 17;
console.log(arr1.length);

Hier wird 7 als length ausgegeben. Du wolltest in die Kiste Nr. 6 was hineinlegen, also muss JavaScript erstmal die Kisten 0-5 hinstellen, damit die Nummern vollständig sind.

Du kannst auch selbst was draufschieben. Wenn Du weißt, dass da ein Stapel ist, aber nicht, wieviele Kisten er hat, kannst Du JavaScript sagen: Schiebe (englisch push) die Kiste obendrauf:

// arr3 ist das Array mit 4 Kisten aus dem ersten Beispiel
arr3.push(12345);
console.log(arr1.length);   // gibt 5 aus

Dieser Kistenstapel hat noch eine andere Eigenschaft: es gibt nummerierte Kisten und Extrakisten. Die Extrakisten haben Namen, keine Nummern, und werden bei length nicht mitgezählt.

let arr4 = [];
arr4["Computer"] = "macht Spaß";
console.log(arr4.length);   // gibt 0 aus!

Es ist allerdings nicht ganz einfach, die Extrakisten wiederzufinden, wenn man den Namen nicht mehr weiß. Das erkläre ich, wenn Du es brauchst. Oder suche im Internet, wie man Eigenschaften eines Objekts aufzählt (die Extrakisten sind nämlich genau das: Objekt-Eigenschaften wie dein Daten.Vorname).

Du kannst in ein Array nicht nur einfache Zahlen hineinschieben. Objekte gehen auch. Also z.B. dein Daten-Objekt. Hol Dir die Werte aus den Eingabefeldern, erzeuge das Objekt und pushe es in ein Array. Nicht vergessen: Vorher ein leeres Array hineinschreiben, und das Array so speichern dass es von JavaScript nicht weggeworfen wird. DAS ist in JavaScript etwas tricky, und ich möchte jetzt keinen Vortrag über Closures und Scopes schreiben. Ich sag's mal so: Eine Variable bleibt am Leben, solange sich dafür jemand interessiert. Dieses Interesse kann sich gut verstecken, aber JavaScript passt auf.

document.addEventListener("DOMContentLoaded", function() {
   let Datenspeicher = [];

   document.getElementById("sub").addEventListener("click", function() {
   });
});

Wenn man das einfach so stehen lässt, dann würde die Datenspeicher Variable verschwinden, sobald der DOMContentLoaded Behandler zu Ende ist. Niemand interessiert sich dafür. Aber:

document.addEventListener("DOMContentLoaded", function() {
   let Datenspeicher = [];

   document.getElementById("sub").addEventListener("click", function() {
      let Daten = { ... };
      Datenspeicher.push(Daten);
   });
});

jetzt sieht es anders aus. Der Speichern-Button bekommt eine Funktion angehängt, die die Daten speichert. Der Button interessiert sich für die Funktion, die Funktion interessiert sich für den Datenspeicher, und JETZT bleibt der Datenspeicher erhalten. Das nennt man eine Closure (frage LEO wie man das ausspricht) - die click-Behandlerfunktion schließt den Variablenblock ihres Aufrufers in sich ein.

So, nun hast Du eine Menge Bausteine, ich hoffe, es war nicht zu viel.

Rolf