Miniprojekt — Interaktive To-do-Liste
Drei Griffe, eine kurze Liste: buy tea eintragen, als erledigt markieren, wieder herausnehmen. Solange die Aufgabe offen ist, steht in der Zeile buy tea. Danach steht dort done: buy tea.
Vorher nur Namen, hier die Liste
Die vorige Seite hat die Fähigkeiten benannt und keine Liste gezeigt. Diese Seite ist die Liste. Du greifst zu einem Array, einem Formular, textContent und einem Klick. Beim Hinzufügen darf die Seite nicht neu laden.
text neben done
In tasks liegen Objekte, keines davon ist eine nackte Zeichenkette. Jedes trägt text und done. Frisch angelegt ist done false. addTask schneidet mit trim die Ränder weg. Bleibt nichts übrig, gibt es kein push und nichts wird abgelegt.
const tasks = [];
function addTask(text) {
const clean = text.trim();
if (!clean) {
return;
}
tasks.push({ text: clean, done: false });
}
addTask("buy tea");
console.log(tasks[0].text);
console.log(tasks[0].done);
Zuerst schreibt die Konsole buy tea, direkt darunter false. Bei addTask(" ") frisst trim die Leerzeichen auf, gespeichert wird nichts, die Länge bleibt 0.
Der Speicher überlebt kein Neuladen
Ein abgeschicktes Formular lädt das Dokument neu. Das Array wohnt nur im Speicher, also ist die Liste danach weg. event.preventDefault() schneidet dieses Neuladen ab. Erst dann übernimmst du den Text, leerst das Feld und zeichnest neu.
const form = document.querySelector("#add-form");
const input = document.querySelector("#task-text");
form.addEventListener("submit", (event) => {
event.preventDefault();
addTask(input.value);
input.value = "";
render();
});
Das Dokument bleibt stehen, das Feld ist leer, render läuft. Ein Feld aus lauter Leerzeichen hängt keine Zeile an.
Eine Zeile, zwei Schaltflächen
render leert #tasks und baut je Eintrag ein li. Offen siehst du text. Erledigt siehst du done: und dahinter den Text. An jeder Zeile hängen zwei Schaltflächen, beide mit type="button", sonst würde der Klick das Formular abschicken. Done kippt den Wahrheitswert. Entfernen läuft über splice. Beide zeichnen danach neu, weil die alten Indizes sonst auf den falschen Eintrag zeigen.
function toggleTask(index) {
tasks[index].done = !tasks[index].done;
}
function removeTask(index) {
tasks.splice(index, 1);
}
function render() {
const list = document.querySelector("#tasks");
list.textContent = "";
tasks.forEach((task, index) => {
const item = document.createElement("li");
item.textContent = task.done ? "done: " + task.text : task.text;
const doneButton = document.createElement("button");
doneButton.type = "button";
doneButton.textContent = "Done";
doneButton.addEventListener("click", () => {
toggleTask(index);
render();
});
const removeButton = document.createElement("button");
removeButton.type = "button";
removeButton.textContent = "Remove";
removeButton.addEventListener("click", () => {
removeTask(index);
render();
});
item.append(doneButton, removeButton);
list.append(item);
});
}
Erst addTask("buy tea"), dann toggleTask(0), dann render: die Zeile lautet done: buy tea. Noch einmal umschalten, und sie lautet wieder buy tea. removeTask(0) lässt die Länge bei 0, die nächste Zeichnung hat keine Zeile. Die Wörter aus dem Feld setzt du mit textContent. Als HTML klebst du sie nicht in die Seite.
Alte Nummern lügen nach splice
forEach merkt sich den Index aus genau diesem Durchgang. Nach splice zeigen diese alten Zahlen auf die falsche Aufgabe. Neu zeichnen wirft die bisherigen Schaltflächen weg und baut welche mit den aktuellen Indizes. Ohne dieses zweite Zeichnen löscht Remove die falsche Zeile.
Wer was tut
Das Formular fügt hinzu. Die Liste zeichnet. Done und Remove ändern nur tasks und zeichnen danach wieder.
<!DOCTYPE html>
<html>
<body>
<form id="add-form">
<input id="task-text" type="text">
<button type="submit">Add</button>
</form>
<ul id="tasks"></ul>
<script>
const tasks = [];
function addTask(text) {
const clean = text.trim();
if (!clean) return;
tasks.push({ text: clean, done: false });
}
function toggleTask(index) {
tasks[index].done = !tasks[index].done;
}
function removeTask(index) {
tasks.splice(index, 1);
}
function render() {
const list = document.querySelector("#tasks");
list.textContent = "";
tasks.forEach((task, index) => {
const item = document.createElement("li");
item.textContent = task.done ? "done: " + task.text : task.text;
const doneButton = document.createElement("button");
doneButton.type = "button";
doneButton.textContent = "Done";
doneButton.addEventListener("click", () => {
toggleTask(index);
render();
});
const removeButton = document.createElement("button");
removeButton.type = "button";
removeButton.textContent = "Remove";
removeButton.addEventListener("click", () => {
removeTask(index);
render();
});
item.append(doneButton, removeButton);
list.append(item);
});
}
document.querySelector("#add-form").addEventListener("submit", (event) => {
event.preventDefault();
addTask(document.querySelector("#task-text").value);
document.querySelector("#task-text").value = "";
render();
});
</script>
</body>
</html>
Tippe buy tea und drücke Add. Die Zeile lautet buy tea, das Feld ist leer. Done macht daraus done: buy tea. Remove lässt die Liste leer. Add auf einem leeren Feld fügt nichts hinzu.
Fünf Griffe
- addTask("buy tea"): der erste text ist buy tea, done bleibt false.
- Formular abschicken: die Seite lädt nicht neu, die Zeile steht da.
- Done: die Zeile zeigt done: buy tea.
- Remove: tasks.length ist 0.
- Nur Leerzeichen schicken: die Liste wächst nicht.
So geht die Liste kaputt
- preventDefault weglassen, dann stirbt das Array beim Abschicken
- eine leere Zeichenkette per push ablegen
- an Done oder Remove type="submit" setzen
- eine Zeile nur auf dem Bildschirm löschen und splice vergessen, sodass die nächste Zeichnung sie zurückholt
- nach splice kein render aufrufen
- den Feldinhalt als HTML in die Seite schreiben
Fünf Sätze zum Mitnehmen
- Eine Aufgabe ist { text, done }, und done startet mit false
- addTask("buy tea") speichert buy tea, ein leeres Feld speichert nichts
- preventDefault hält die Seite, render zeichnet die Zeilen
- Done zeigt done: buy tea, Remove lässt die Länge bei 0
- Nach jeder Änderung neu zeichnen
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt