Variablennamen durch Variable bestimmen
0 1 
dedlfix
0 Felix Riesterer
0 0 Felix Riesterer
0 
Henry
Variablennamen durch Variable bestimmen
Gunnar Bittersmann
Tabellenkalk
Matthias Apsel
MudGuardHallo, ich habe eine kleine Frage: Wie kann ich in Javascript(ES6) einen Variablennamen durch eine Variable bestimmen. Ich möchte nämlich eine Seite machen(Nur zu Testzwecken) die durch eine Textfeldeingabe ein Objekt erzeugt, in der die Daten des Nutzers gespeichert werden. Das Problem ist: Wenn ich ein Objekt erzeuge, kann ich den Namen(Soweit ich weiß) nur einmal verwenden. Ich möchte aber mehrere Objekte Pro Seitenbesuch erstellen können. Der HTML Code ist:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Objekte</title>
<script src="Objects.js"></script>
</head>
<body>
<input id="firstname" type="text" placeholder="Dein Name">
<input id="lastname" type="text" placeholder="Dein Nachname">
<input id="age" type="text" placeholder="Dein Alter">
<input id="sub" type="button" value="Abschicken">
</body>
</html>
Der Javascript code ist:
document.addEventListener("load", function() {
let Vorname = document.getElementById("firstname");
let Nachname = document.getElementById("lastname");
let Alter = document.getElementById("age");
let start = document.getElementById("sub");
let objectname = 0;
start.addEventListener("click", function() {
objectname++;
objectname.toString(2);
});
});
Wie kann ich die Variable objectname den Objektnamen bestimmen lassen?
akzeptierte Antworten
Variablennamen durch Variable bestimmen
dedlfix
Bewertung: +1, 1 Stimme
Variablennamen durch Variable bestimmen
Felix Riesterer
Bewertung: keine Bewertung
Variablennamen durch Variable bestimmen
Rolf B
Bewertung: keine Bewertung
-
hallo
<body> <input id="firstname" type="text" placeholder="Dein Name"> <input id="lastname" type="text" placeholder="Dein Nachname"> <input id="age" type="text" placeholder="Dein Alter"> <input id="sub" type="button" value="Abschicken"> </body> </html>
Wie kann ich die Variable objectname den Objektnamen bestimmen lassen?
Verwende ein form element, um Inputs logisch zusammenzuführen.
Wenn du mit https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest arbeiten willst, registriere ein onsubmit handler auf form. In der function hast du dann Zugriff auf https://developer.mozilla.org/en-US/docs/Web/API/FormData.
--
Neu im Forum! Signaturen kann man ausblenden!-
@@beatovich
Wenn du mit https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest arbeiten willst
Wer will das schon in Zeiten des Fetch API?
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
hallo
Wer will das schon in Zeiten des Fetch API?
Ja und das gehört auch zur docu, und zwar zuerst!
https://caniuse.com/#search=fetch
--
Neu im Forum! Signaturen kann man ausblenden!
-
-
-
Tach!
Wie kann ich die Variable objectname den Objektnamen bestimmen lassen?
Globale Variablen sind Eigenschaften des Objekts window. Aber in deinem Fall wird es wohl besser sein, nicht individuelle Variablen anzulegen, sondern eine Variable als Objekt und deine anderen Variablen legst du als Eigenschaften dieses Objekts an. Somit hat man sie alle schön beisammen und nciht überall verstreut.
dedlfix.
-
Danke für den Tipp, aber irgendetwas funktioniert doch nicht. Das ist der Javascript code:
document.addEventListener("load", function() { let start = document.getElementById("sub"); start.addEventListener("click", function() { let Vorname = document.getElementById("firstname"); let Nachname = document.getElementById("lastname"); let Alter = document.getElementById("age"); let Altervalue = Alter.value; let Vornamenvalue = Vorname.value; let Nachnamenvalue = Nachname.value; let Daten = {}; Daten.Vorname = Vornamenvalue; Daten.Nachname = Nachnamenvalue; Daten.Alter = Altervalue; console.log(Daten.Vorname); console.log(Daten.Nachname); console.log(Daten.Alter); }); });Siehst du da einen Fehler?
-
Tach!
Danke für den Tipp, aber irgendetwas funktioniert doch nicht.
Debugging ist dann an der Reihe. Nutze die Entwicklertools des Browsers, um dich der Ursache zu nähern.
Siehst du da einen Fehler?
Du darfst ruhig ein paar Hinweise geben, was nicht funktioniert. Je detaillierter desto besser.
dedlfix.
-
Hallo,
Du darfst ruhig ein paar Hinweise geben,
Ach komm, so wird das Ratespiel doch langweilig ;)
Gruß
Kalk -
Leider, weiss ich nicht, was das Problem ist. Wenn ich die Konsole öffne, in der das Objekt eigentlich ausgegeben steht da nämlich gar nichts. Übrigens, ich bin erst 9.
-
Tach!
Leider, weiss ich nicht, was das Problem ist.
Deswegen betreibt man Debugging, damit man dem Problem auf die Spur kommen kann.
Wenn ich die Konsole öffne, in der das Objekt eigentlich ausgegeben steht da nämlich gar nichts.
In der Konsole stehen nur Fehlermeldungen. Oder auch das was du mit console.log() dorthin ausgeben lässt. Wenn da also nichts steht, hast du keinen Syntaxfehler, sondern einen logischen im Programm.
Du kannst dir die Inhalte der Variablen ausgeben lassen. Noch besser ist es aber, einen Breakpoint zu setzen und schrittweise durch den Code zu gehen, Dabei kannst du dir mit Mausdraufhalten die Variableninhalte anschauen.
dedlfix.
-
-
-
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.
loadauf 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
DOMContentLoadedund 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:
- 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
--
sumpsi - posui - clusi-
Danke für den Tipp, jetzt klappt alles super. 😀 😂 Das ist der richtige Code: HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Objekte</title> <script src="Objects.js"></script> </head> <body> <input id="firstname" type="text" placeholder="Dein Name"> <input id="lastname" type="text" placeholder="Dein Nachname"> <input id="age" type="text" placeholder="Dein Alter"> <input id="sub" type="button" value="Abschicken"> </body> </html>Und das ist der JavaScript Code:
document.addEventListener("DOMContentLoaded", function() { let start = document.getElementById("sub"); start.addEventListener("click", function() { let Vorname = document.getElementById("firstname").value; let Nachname = document.getElementById("lastname").value; let Alter = document.getElementById("age").value; let Daten = { Vorname: Vorname, Nachname: Nachname, Alter: Alter }; console.log(Daten["Vorname"]); console.log(Daten["Nachname"]); console.log(Daten["Alter"]); }); });-
Hallo af2111,
<!DOCTYPE html> <html lang="en"> <input id="sub" type="button" value="Abschicken"> </body> </html>Deine Dokumensprache ist deutsch.
Verwende buttons zum Abschicken (siehe unser blog).
Bis demnächst
Matthias--
Rosen sind rot.-
@@Matthias Apsel
Deine Dokumensprache ist deutsch.
Deshalb ist
<html lang="en">hier falsch,<html lang="de">richtig.Warum die richtige Angabe der Sprache wichtig ist
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-
Liebe(r) af2111,
<!DOCTYPE html> <html lang="en"> <head>...</head> <body> <input id="firstname" type="text" placeholder="Dein Name"> <input id="lastname" type="text" placeholder="Dein Nachname"> <input id="age" type="text" placeholder="Dein Alter"> <input id="sub" type="button" value="Abschicken"> </body> </html>Matthias hat schon bemängelt, dass Du mit
lang=en"fälschlicherweise Englisch als die Inhaltssprache angibst, obwohl Dein Inhalt in deutscher Sprache ist.Desweiteren gehören
input-Elemente mit einer Beschriftung (einem passendenlabel) versehen.Liebe Grüße,
Felix Riesterer.
-
@@Felix Riesterer
Desweiteren gehören
input-Elemente mit einer Beschriftung (einem passendenlabel) versehen.Genau. Placeholder sind kein Ersatz für Labels! – Wirklich nicht!
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-
-
Hi,
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.Nö. Der Browser liest das HTML, und sobald er dabei auf das script stößt, führt er es aus (initialisiert also den load-Eventhandler in deinem Beispiel). Danach fährt er fort mit dem Laden des HTML. Und erst wenn der Browser am Ende des HTML-Dokuments angekommen ist, und wenn auch alle verlinkten Resourcen wie img geladen sind, feuert das load-Event.
Etwas früher, nämlic[1] wenn der Browser am Ende des HTML-Dokuments angekommen ist und daraus ein DOM erstellt hat, feuert das DOM-Ready-Event (oder wie das genau heißt). Aber auch davor wurde das script bereits ausgeführt.
cu,
Andreas a/k/a MudGuard
Fast hätte ich den Vertipper korrigiert, aber mir fiel gerade noch rechtzeitig ein: wer nämlic mit h schreibt ist dämlic. 😉 ↩︎
-
Hi,
PS: statt mit dem DOM-Ready-Event zu arbeiten, kann man das script auch einfach am Ende des body einfügen.
cu,
Andreas a/k/a MudGuard -
Hallo MudGuard,
Nö.
Dö! Es gibt das load Event pro Ressource. Unser Jung-Informatiker hat sich auf document.load registriert. Das feuert vor Ausführung der Scripte, wenn ich den SO-Beitrag richtig verstanden habe.
Du sprichst aber von window.load!
Rolf
--
sumpsi - posui - clusi
-
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 ausDieser 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
--
sumpsi - posui - clusi-
Danke für den tipp mit dem array, jetzt passt alles. Der HTML Code ist:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Objekte</title> <script src="Objects.js"></script> </head> <body> <fieldset> <label for="firstname"> Vorname <input id="firstname" type="text" placeholder="Dein Name"> <br><br> </label> <label for="lastname"> Nachname <input id="lastname" type="text" placeholder="Dein Nachname"><br> <br> </label> <label for="age"> Alter <input id="age" type="text" placeholder="Dein Alter"><br> <br> </label> <input id="sub" type="button" value="Abschicken"><br><br> </fieldset> <div id="Persons"> </div> </body> </html>Der JavaScript Code ist:
document.addEventListener("DOMContentLoaded", function() { let start = document.getElementById("sub"); start.addEventListener("click", function() { let Vorname = document.getElementById("firstname").value; let Nachname = document.getElementById("lastname").value; let Alter = document.getElementById("age").value; let Persons = document.getElementById("Persons") let Datenspeicher = []; let Daten = { Vorname: Vorname, Nachname: Nachname, Alter: Alter, PrintPerson: function(p) { Persons.innerText = p.Vorname + " " + p.Nachname + " ist " + p.Alter + " Jahre alt." } } Datenspeicher.push(Daten) Daten.PrintPerson(Datenspeicher[Datenspeicher.length - 1]); console.log(Datenspeicher); let Farben = [ "yellow", "orange", "red", "lightblue", "blue", "fuchsia", "pink", "gold", "lightgreen", "green", "" ] document.body.style.backgroundColor = Farben[Math.floor(Math.random() * 10)]; }); });Probier das mal aus. 😀😀😀😀
-
-
-
-
Liebe(r) af2111,
Wie kann ich in Javascript(ES6) einen Variablennamen durch eine Variable bestimmen.
das ist eine sehr spezielle Frage, die ein Problem zu lösen versucht. Es kann sein, dass Dein Lösungsansatz hinter dieser speziellen Frage ein Irrweg ist. Daher frage ich zurück: Was genau willst Du denn erreichen? Was ist Dein Projekt?
Liebe Grüße,
Felix Riesterer.
-
Ich möchte(Zu Testzwecken) die Daten, die der Nutzer eingibt, in ein Objekt speichern.
Vielleicht sollte ich auch sagen, dass ich erst 9 bin. 😀
-
Lieber af2111,
Ich möchte(Zu Testzwecken) die Daten, die der Nutzer eingibt, in ein Objekt speichern.
wozu? Was ist das eigentliche Ziel?
Vielleicht sollte ich auch sagen, dass ich erst 9 bin. 😀
Das ist äußerst ehrenwert, aber nicht das Ziel in Deinem Projekt. Worum geht es Dir wirklich?
Liebe Grüße,
Felix Riesterer.
-
Ich lerne gerade JavaScript mit einem Udemy-Tutorial, und möchte erst einmal einfache Website-Teile schreiben, die ich dann zum Schluss zu einer großen Website, z.B ein Hausaufgabenforum für die Schule zusammenfassen will. Im Moment möchte ich wirklich nur die kleinen Websiteteile schreiben.
-
Liebe(r) af2111,
Ich lerne gerade JavaScript
prima!
mit einem Udemy-Tutorial,
Eines von diesen hier?
und möchte erst einmal einfache Website-Teile schreiben,
"Website-Teile" schreibt man mit HTML und nicht mit JavaScript.
ein Hausaufgabenforum für die Schule
Dazu wirst Du eine serverseitige Sprache benötigen. JavaScript läuft im Browser. Wenn jemand im Forum etwas posten will, dann muss das ja auf dem Server irgendwie gespeichert werden, damit der nächste Besucher das zu sehen bekommt. Mit JavaScript alleine geht das nicht!
Im Moment möchte ich wirklich nur die kleinen Websiteteile schreiben.
Und warum dann nicht mit HTML, sondern mit JavaScript?
Liebe Grüße,
Felix Riesterer.
-
-
-
Hallo af2111,
Ich möchte(Zu Testzwecken) die Daten, die der Nutzer eingibt, in ein Objekt speichern.
Einige Lösungsansätze findest du auch hier.
Vielleicht sollte ich auch sagen, dass ich erst 9 bin. 😀
Wenn man Javascript der Poesie zugehörig erklärt, "Poetis mentiri licet".
Gruss
Henry
-
-