Das vorliegende JavaScript-Code-Snippet definiert eine Funktion, die ein einfaches Eingabe- und Ausgabesystem für Aufgaben oder Einträge bereitstellt. Lass uns den Code Schritt für Schritt betrachten:
1. Zu Beginn des Codes werden Variablen definiert, um auf bestimmte Elemente in der HTML-Datei zuzugreifen. Es gibt vier Variablen:
- `enterButton` bezieht sich auf das Element mit der ID "add". Das könnte beispielsweise ein Button sein, der zum Hinzufügen eines Eintrags verwendet wird.
- `input` bezieht sich auf das Element mit der ID "textfield". Dies könnte ein Textfeld sein, in dem der Benutzer einen Eintrag eingeben kann.
- `ul` bezieht sich auf das erste `ul`-Element auf der Seite. Dies könnte eine ungeordnete Liste sein, in der die Einträge angezeigt werden.
- `item` ist eine Sammlung von Elementen mit dem Tag "li" (Listenelement). Dies sind bereits vorhandene Einträge, die möglicherweise auf der Seite vorhanden sind.
2. Die Funktion `erstellenEintrag` wird definiert. Diese Funktion wird ausgeführt, wenn der Benutzer auf den "enterButton" klickt. Zuerst wird überprüft, ob der Wert des "input"-Elements nicht leer ist. Wenn es nicht leer ist, wird ein neues `li`-Element erstellt und dem `ul`-Element hinzugefügt. Der Wert des "input"-Elements wird dann zurückgesetzt.
3. Das neu erstellte `li`-Element erhält einen Event-Listener, der auf Klickereignisse reagiert. Wenn der Benutzer auf ein Eintrags-`li`-Element klickt, wird die Funktion `abgehaktEintrag` aufgerufen.
4. Die Funktion `abgehaktEintrag` wird definiert. Diese Funktion ändert den Klassenwert des angeklickten `li`-Elements und fügt oder entfernt die Klasse "done". Dadurch kann das Aussehen des Eintrags geändert werden, um anzuzeigen, dass er erledigt wurde (z. B. durch Hinzufügen einer durchgestrichenen Linie).
5. Schließlich wird ein Event-Listener dem "enterButton" hinzugefügt, der die Funktion `erstellenEintrag` aufruft, wenn der Benutzer auf den Button klickt. Dadurch wird der Prozess zum Hinzufügen eines neuen Eintrags aktiviert.
Insgesamt ermöglicht dieser Code die Interaktion mit einem Eingabe- und Ausgabesystem für Aufgaben oder Einträge. Der Benutzer kann neue Einträge hinzufügen und vorhandene Einträge als erledigt markieren, indem er auf sie klickt.
da hinzufügen müsste so funktionieren (Code ist ungetestet und ich würde mein wissen als Anfänger bezeichnen)
Javascript:
<script>
var enterButton = document.getElementById("add");
var input = document.getElementById("textfield");
var ul = document.querySelector("ul");
var item = document.getElementsByTagName("li");
// Funktion zum Erstellen eines Eintrags
function erstellenEintrag() {
// Überprüfe, ob das Eingabefeld nicht leer ist
if (input.value !== '') {
// Erstelle ein neues <li> Element
var li = document.createElement("li");
// Füge den eingegebenen Text als Textknoten hinzu
li.appendChild(document.createTextNode(input.value));
// Füge das <li> Element der <ul> Liste hinzu
ul.appendChild(li);
// Setze den Wert des Eingabefelds zurück
input.value = "";
// Füge einen Event-Listener hinzu, um den Eintrag als erledigt zu markieren
li.addEventListener("click", abgehaktEintrag);
// Erstelle einen Lösch-Button
var deleteButton = document.createElement("button");
// Setze den Text des Lösch-Buttons auf "Löschen"
deleteButton.appendChild(document.createTextNode("Löschen"));
// Füge den Lösch-Button dem <li> Element hinzu
li.appendChild(deleteButton);
// Füge einen Event-Listener hinzu, um den Eintrag zu löschen
deleteButton.addEventListener("click", loescheEintrag);
}
}
// Funktion zum Markieren eines Eintrags als erledigt
function abgehaktEintrag() {
// Wechsle die CSS-Klasse "done" für das <li> Element
this.classList.toggle("done");
}
// Funktion zum Löschen eines Eintrags
function loescheEintrag() {
// Entferne das übergeordnete Element (das <li> Element)
this.parentNode.remove();
}
// Füge den Event-Listener hinzu, um einen Eintrag zu erstellen
enterButton.addEventListener("click", erstellenEintrag);
</script>
viel Spaß! Stefan
