Einkaufsliste JavaScript mehrere Einträge?
Hallo, ich bin noch Anfänger im Programmieren und hätte eine Frage: wie kann ich mehrere Einträge in die UL packen? Bis jetzt geht nur ein Eintrag. Und wenn ich einen neuen hinzufügen will dann wird der alte gelöscht.
Tut mir leid für die dummen variablen Namen xD
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="kaufen" id="test">
<button id="btn">Hinzufügen</button>
<ul id="list"></ul>
<script>
const hinzufügenbtn = document.getElementById("btn");
hinzufügenbtn.addEventListener("click", function(){
const add = document.getElementsByName("kaufen")[0].value;
const tt = document.getElementById("list").innerHTML = add;
})
</script>
</body>
</html>
1 Antwort
Vom Beitragsersteller als hilfreich ausgezeichnet
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
programmieren
Du musst das InnerHTML nicht mit = ersetzen, sondern mit += den neuen Wert anhängen. Sonst ersetzt Du ja jedes Mal das HTML durch den letzten Eintrag.
Aber vermutlich musst Du vor den Inhalt von add noch ein "<li>" und danach noch ein "</li>" schreiben, sonst bekommst Du keine Listeneinträge.
Also:
const add = "<li>" + document.getElementsByName("kaufen")[0].value + "</li>";
document.getElementById("list").innerHTML += add;