Auf Thema antworten

Beitrag

[QUOTE="nafets, post: 13903, member: 4775"]
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)

[CODE=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>[/CODE]

viel Spaß! Stefan
[/QUOTE]

Authentifizierung