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.
