Könnt ihr mir bei folgendem JavaScript Problem helfen?
programmieren ist mein jüngstes und schwierigstes hobby, ich würd mich freuen wenn ich dieses Problem lösen könnte. Ich möchte, dass jeder Name, der im Eingabefeld eingegeben wird unten erscheint.
danke im voraus.
https://jsfiddle.net/6wcf9j5e/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form class="guestList" action="index.html" method="post">
<label>Your Name: </label>
<input type="text" name="" value="..." id="nameInput;" />
<input type="submit" name="" value="submit" onclick="pushArray();"/>
</form>
<div id="addName"></div>
<script type="text/javascript" src="dailyrepead.js">
</script>
</body>
</html>
JS:
var guestList = [];
var count = document.getElementById("nameInput");
function pushArray() {
guestList.push(count);
document.getElementById("addName").innerHTML += guestList[count] +"<br>";
}
var guestList = [];
var count = document.getElementById("nameInput");
function pushArray() {
guestList.push(count);
document.getElementById("addName").innerHTML += guestList[count] +"<br>";
}
html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form class="guestList" action="index.html" method="post">
<label>Your Name: </label>
<input type="text" name="" value="..." id="nameInput;" />
<input type="submit" name="" value="submit" onclick="pushArray();"/>
</form>
<div id="addName"></div>
<script type="text/javascript" src="dailyrepead.js">
</script>
</body>
</html>
2 Antworten
Du arbeitest hier ohne PHP oder? Wenn ja kannste die Form eigentlich weg lassen. Du hast ja ne onClick drinnen. Wie auch immer jeder Name soll hinzugefügt werden?
function addName(name) {
let box = document.findElementById("addName");
let name = document.findElementById("nameInput");
box.innerHTML = box.value + name.value + "<br>";
}
Aber du hast die id falsch benannt. Du hast id="nameInput;", nicht id="nameInput".
P.S.
Ich kann gerade nicht sagen ob mein Code absolut richtig ist, allerdings Guck ich nachher ganz nüchtern nochmal nach.
EDIT:
So, bin wieder bei "verstand". Also ich hab das jetzt mal so gemacht:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Name Example</title>
</head>
<body>
<input type="text" placeholder="Enter your Name ..." id="name">
<button onClick="addName(document.getElementById('name').value);">Hinzufügen</button>
<div id="names"></div>
<script type="text/javascript">
let names = [];
function addName(name) {
name += "<br>";
names.push(name);
let box = document.getElementById("names");
let add = "";
for(n of names) {
add += n;
}
box.innerHTML = add;
}
</script>
</body>
</html>
Gibt es schönere wege? Ja. Sind die für Anfänger geeignet? Nein. Mit schöner meine ich das man nicht immer das ganze Div komplett neu schreibt.
Wie auch immer, hier die Code erklärung:
let names = []; = Das ist eine Variable. Eine Liste um genau zu sein. Würdest du im echten Leben Namen aufschreiben, dann doch auch auf eine Liste, oder?
function addName(name) { = hier erstellen wir die Funktion. Warum steht da aber "name" drinnen? Nun, jetzt wird diese Funktion eben mit dem Namen aufgerufen den wir hinzufügen wollen. z.B. addName("Fido_de07").
name += "<br>"; = Das hab ich jetzt nicht anfängerfreundlich gemacht, tut mir leid. Die Variable name (Die eben beim 2. Schritt übergeben wurde) ist noch kein <br> drinnen. += fügt an das Ende vom String noch ein <br> hinzu.
names.push(name); = Damit fügen wir den Namen in unsere Liste ein.
let box = document.... = Das denke ich kennst du ja, man findet ein Element durch die ID die man ihm gegeben hat.
let add = ""; = Das ist einfach. Diese Variable ist ein String. Weißt du noch was += macht? Es fügt zu einem String noch mehr hinzu. Genau das verwenden wir dann gleich.
for(n of names) { = Ich weiß nicht wie weit du bereits bist, dass ist allerdings eine sogenannte for schleife. Sagen wir du hast eine Gästeliste. Da sind jetzt 30 Namen drauf. Die For Schleife geht jeden Namen einmal durch. n of names, dass heißt n ist immer der jetzige Name. Und damit die For Schleife auch weiß durch welche Liste sie nun eigentlich gehen soll "of names". Den so hab ich ja die Liste bei Schritt 1. genannt.
add += n; = Na, was glaubst du? Richtig, der Name "n" wird jetzt zu unserem String hinzugefügt. Diesen String fügen wir dannach nur noch zur Box hinzu, unzwar so:
box.innerHTML = add; = add ist ein String. Diesen fügen wir jetzt einfach in die box ein.
Schreib einfach einen Kommentar bei Fragen, ich hoffe ich konnte helfen.
Hab es bearbeitet. Bin zwar sicher, dass du es schon geschafft hast allerdings kann es ja nicht schaden sich das mal anzugucken.
danke, jetzt ist alles viel klarer. sowas hab ich gebraucht.
Hmm... das sieht etwas schräg aus.
Bei
document.getElementById("addName").innerHTML += guestList[count] +"<br>";
sollte count möglichst eine Zahl sein. Aber wenn man nun einen Text in das Textfeld eingibt und submit clickt, ist der Text aus dem Eingabefeld in count:
var count = document.getElementById("nameInput");
So wie Du es machst, muss nichts gezählt werden, der Name count ist irreführend.
Dann machst Du das Auslesen des Textfeldes außerhalb Deiner Funktion pushArray. Immer wenn Du pushArray aufrufst, wird derselbe Text aus count eingefügt! Da steht gar kein Name drin.
Übrigens bringt
document.getElementById("nameInput")
nicht den eingetippten Namen, sondern das Element. Du brauchst den value davon! Also:
document.getElementById("nameInput").value
Dein submit ruft die (oder eine) Seite neu auf. Ändere mal den Typ von submit zu button.
Insgesamt:
- ID muss beide Male gleich heißen: "nameInput" (einmal hattest Du ein Semikolon am Ende)
- type="submit" ändern zu type="button", damit die Seite nicht neu geladen wird.
- Deine pushArray-Funktion sollte umbenannt werden, denn ein Array wird nicht gebraucht.
- Es sollte nicht das Element sondern sein value hinzugefügt werden.
- In JS brauchst Du außerhalb der Funktion nichts, denn es wird nicht ausgeführt, wenn auf den Button geklickt wird.
Javascript:
function addName() {
document.getElementById("addName").innerHTML += document.getElementById("nameInput").value +"<br>";
}
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form class="guestList" action="index.html" method="post">
<label>Your Name: </label>
<input type="text"placeholder="Namen eingeben..." id="nameInput" />
<input type="button" value="submit" onclick="addName();"/>
</form>
<div id="addName"></div>
<script type="text/javascript" src="dailyrepead.js">
</script>
</body>
</html>
Ich vermute, das geht schon eher in die Richtung, die Du Dir vorgestellt hast.
ich bin leider leider leider noch lange nicht so weit, um überhaupt an backend denken zu düfen.
noch funktionierts leider nicht, trotzdem danke =)