Wie kann ich den Fehler bei meiner To-Do-Liste (mit HTML und JavaScript) beheben?
Mein Ziel ist es, eine To-Do-Liste mit HTML, CSS und Javascript zu erstellen. Eine Person gibt ihr To-Do ein und kann es mit ENTER oder mit dem "Bestätigen"-Button hinzufügen. Gleichzeitig wird auch die Leiste, wo man dies eingibt, wieder geleert.
Wenn man nun dort etwas eingibt und bestätigt, wird die Eingabeleiste geleert, aber das To-Do fügt sich nicht hinzu. Oder besser gesagt: Es erscheint nur für ein paar Millisekunden.
Wie kann ich den Fehler beheben (ich bin Anfänger)?
Hier der Code von der index.html-Datei:
<!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>ToDo Liste</title>
<style>
#input {
margin: 50px;
text-align: center;
}
</style>
<script>
function addTodo() {
todolist.innerHTML += `${todofield.value}`;
todofield.value= '';
}
</script>
</head>
<body>
<form onsubmit="addTodo()">
<div id="input">
<input type="text" id="todofield">
<button type="submit" for="todofield">Bestätigen</button>
</div>
</form>
<div id="todolist"></div>
</body>
</html>
Danke für eure Hilfe.
1 Antwort
https://jsfiddle.net/kwzpjo0b/
nach dem ausführen von addTodo nicht absenden (return false;)
<form onsubmit="addTodo();return false;">
naja, dein Input Typ Submit , veranlasst ja das OnSubmit Event auszulösen . normal wird bei einer FORM dann der inhalt an den server geschickt und die antwort angezeigt . Mit dem Überschreiben des OnSubmit Events, wird erst das gemacht was da steht und wenn alles ok ist dann gesendet . mit dem Return False sagst du jetzt dem standard formularsubmit das es nicht senden darf = false , du darfst senden wäre dann true ;()
du bräuchtest das alles nicht wenn du einfach einen Button nimmst un nur die funktion aufrufst
<button onclick="addTodo()"
beispiel :
<form >
<div id="input">
<input type="text" id="todofield">
<button type="button" for="todofield" onclick="addTodo();">Bestätigen</button>
</div>
</form>
Vielen Dank! Könntest du mir vielleicht erklären warum genau dies jetzt Funktioniert? Oder mir ein Link schicken, wo das erklärt wird? Damit ich so einen Fehler nicht mehr mache und auch weiß wo, wann und wie ich das benutze?