Formular auslese Fehler VIA JS?
Hallo,
mein Name ist Nils. Ich habe jetzt mit dem Programmieren angefangen, HTML, CSS (sind ja keine richtigen Programmiersprachen) kann ich schon. Nun habe ich angefangen JS zu lernen. Ich wollte erst einmal eine einfache ToDO Webanwendung entwickeln. Also habe ich angefangen via JS ein Formular auszulesen und anzuzeigen. Nur leider klappt dies nicht. Woran liegt es?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>ToDoListe</h1>
<dive id="addToDoDive">
<form>
<input type="text" id="ToDoName" placeholder="ToDo Name">
<input type="button" id="ToDoSaveBtn" value="ToDo speichern" onclick="AddToDo">
</form>
<script>
function AddToDo(){
var listElement = document.getElementById("ToDoName").value;
var ToDoName = console.log(listElement);
}
</script>
</dive>
<dive id="seeToDo">
</dive>
</body>
</html>
2 Antworten
1) Du rufst die AddToDo-Funktion nicht auf, es fehlt die Argumentenliste:
onclick="AddToDo()"
2) Ein Hinweis bzgl. console.log: Diese Funktion schreibt einen String in die Browserkonsole, aber gibt selbst nichts zurück. Daher macht es keinen Sinn, ihren Rückgabewert in einer Variable zu speichern.
Um die Eingaben in #seeToDo anzuzeigen, müsstest du ein DOM-Element erstellen und dieses dem Container anhängen.
Beispiel:
const outputContainer = document.getElementById("seeToDo");
const newEntry = document.createElement("p");
newEntry.textContent = listElement;
outputContainer.appendChild(newEntry);
In diesem Fall wird je Eintrag ein neuer Paragraph erstellt. Für eine To-Do-Liste wäre es allerdings passender, generell mit einer Auflistung (ul/ol) zu arbeiten. Es sollte also stets ein li-Element erzeugt werden und den Elementtyp von #seeToDo müsste man zu ul oder ol (je nachdem, ob die Reihenfolge der To-Do's relevant ist oder nicht) ändern.
3) Den Elementtyp dive gibt es nicht, div hingegen schon. Entferne das e bei all diesen Vorkommen.
Da in deinem Code des Weiteren dauernd var statt let/const (was besser passen würde) auftaucht, würde ich dir einmal empfehlen, die Aktualität deiner Lernquelle zu prüfen. Wenn sie noch vor 2015/2016 verfasst wurde, wäre sie meines Erachtens zu alt.
Aktuelle Online-Quellen findest du beispielsweise auf MDN oder MediaEvent.
Beginne ggf besser mit den "Exercise" von W3 School.
JavaScript Exercises (w3schools.com)
Da ist auch gleich Nachschlage-Info um die Ecke.
Es gibt aber auch noch andere Lernplattformen.