Kurze Einführung einer TODO-Liste in Javascript, mit der du Einträge hinzufügen, ändern und entfernen kannst. Als Erstes benötigen wir eine HTML-Seite, auf der wir unser Formular und unsere Liste erstellen können. Wir benötigen ein Textfeld, einen Button zum Hinzufügen von Einträgen und einen Button zum Entfernen von Einträgen. Hier können wir auch eine Funktion hinzufügen, um Aufgaben zu ändern.
<!DOCTYPE html>
<html>
<head>
<title>Meine ToDo-Liste</title>
</head>
<body>
<h1>Meine ToDo-Liste</h1>
<form>
<input type="text" placeholder="Neue Aufgabe hinzufügen">
<button type="submit">Hinzufügen</button>
</form>
<ul>
<li>
<span>Erste Aufgabe</span>
<button class="edit">Ändern</button>
<button class="remove">Entfernen</button>
</li>
<li>
<span>Zweite Aufgabe</span>
<button class="edit">Ändern</button>
<button class="remove">Entfernen</button>
</li>
</ul>
<script src="main.js"></script>
</body>
</html>
Als nächstes müssen wir den Submit-Button mit einer Funktion verbinden, die die eingegebene Aufgabe unserer Liste hinzufügt. Wir können auch eine Funktion hinzufügen, um Aufgaben zu ändern, indem wir auf den „Ändern“-Button klicken.
const form = document.querySelector('form');
const input = form.querySelector('input');
const ul = document.querySelector('ul');
form.addEventListener('submit', function(event) {
event.preventDefault();
const newTask = document.createElement('li');
const taskSpan = document.createElement('span');
const editButton = document.createElement('button');
const removeButton = document.createElement('button');
taskSpan.textContent = input.value;
editButton.textContent = 'Ändern';
removeButton.textContent = 'Entfernen';
ul.appendChild(newTask);
newTask.appendChild(taskSpan);
newTask.appendChild(editButton);
newTask.appendChild(removeButton);
input.value = '';
removeButton.addEventListener('click', function() {
ul.removeChild(newTask);
});
editButton.addEventListener('click', function() {
const newInput = document.createElement('input');
const saveButton = document.createElement('button');
newInput.value = taskSpan.textContent;
saveButton.textContent = 'Speichern';
newTask.insertBefore(newInput, taskSpan);
newTask.insertBefore(saveButton, taskSpan);
newTask.removeChild(taskSpan);
newTask.removeChild(editButton);
newTask.removeChild(removeButton);
saveButton.addEventListener('click', function() {
taskSpan.textContent = newInput.value;
newTask.insertBefore(taskSpan, newInput);
newTask.insertBefore(editButton, newInput);
newTask.insertBefore(removeButton, newInput);
newTask.removeChild(newInput);
newTask.removeChild(saveButton);
});
});
});
Und voilà, wir haben unsere ToDo-Liste mit der Möglichkeit zum Hinzufügen, Ändern und Entfernen von Einträgen programmiert! Nun können wir unsere Aufgaben hinzufügen und bearbeiten, indem wir auf den „Ändern“-Button klicken
Schauen Sie sich noch weitere Beiträge an:
