Meine Aufgaben
- Einkaufen
- JavaScript lernen
JavaScript macht Webseiten interaktiv.
``` entsteht gedanklich eine Baumstruktur: ```text document └── html ├── head └── body ├── h1 └── p ``` Jedes HTML-Element wird dabei zu einem Objekt im DOM. JavaScript kann diese Objekte untersuchen, verändern, hinzufügen oder entfernen. > **Merke:** HTML beschreibt den ursprünglichen Aufbau der Seite. Das DOM ist die Version dieser Seite, mit der der Browser und JavaScript gerade arbeiten. --- ## Das globale Objekt `document` JavaScript erhält über das Objekt `document` Zugriff auf die geladene Webseite. ```js console.log(document); ``` Gib diesen Befehl in der Browser-Konsole ein. Du siehst die Struktur des aktuellen Dokuments. `document` steht für die gesamte HTML-Seite. Es enthält unter anderem: - das ``-Element, - den Bereich ``, - den sichtbaren Bereich ``, - alle Überschriften, Absätze, Bilder, Buttons und Formulare. Du kannst beispielsweise den Seitentitel auslesen: ```js console.log(document.title); ``` Der Titel stammt aus dem `Hallo!
``` Das DOM entsteht daraus erst, wenn der Browser die Datei verarbeitet. JavaScript verändert normalerweise das DOM — nicht direkt die gespeicherte HTML-Datei. Schau dir dieses Beispiel an: ```htmlPraktisch für Alltag und Reise.
Ich lerne das DOM kennen.
``` Erstelle daneben die Datei `script.js`: ```js console.log(document); console.log(document.title); console.log(document.body); ``` Öffne anschließend die HTML-Datei im Browser und rufe die Konsole auf. Du solltest Folgendes beobachten: - `document` repräsentiert das gesamte Dokument. - `document.title` gibt den Seitentitel aus. - `document.body` gibt den sichtbaren Inhaltsbereich aus. Das Attribut `defer` im ` ``` Es sorgt dafür, dass der Browser zuerst das HTML verarbeitet und das JavaScript danach ausführt. So steht das DOM bereit, wenn dein Skript darauf zugreift. --- ## Veränderungen im DOM beobachten Öffne in den Entwicklerwerkzeugen den Bereich **Elements**. Gib danach in der Konsole diesen Code ein: ```js document.body.style.backgroundColor = "lightblue"; ``` Die Hintergrundfarbe der Seite ändert sich sofort. Im Bereich „Elements“ kannst du sehen, dass der Browser eine Stilinformation zum ``-Element ergänzt hat. Du hast damit das DOM zur Laufzeit verändert. Lade die Seite neu. Die Farbe verschwindet wieder, denn die Änderung war nur im aktuellen DOM vorhanden und wurde nicht in deine HTML-Datei geschrieben. > **Wichtig:** Änderungen durch JavaScript bleiben normalerweise nur bestehen, bis die Seite neu geladen wird. --- ## Zusammenfassung - Das **DOM** ist die Objektstruktur einer geladenen HTML-Seite im Browser. - JavaScript greift über `document` auf diese Struktur zu. - HTML-Elemente bilden im DOM eine Baumstruktur aus Eltern-, Kind- und Geschwisterelementen. - Über das DOM kann JavaScript Inhalte, Attribute, Klassen und Styles verändern. - Die Entwicklerwerkzeuge zeigen dir die aktuelle DOM-Struktur. - Mit `defer` wird dein JavaScript ausgeführt, nachdem der Browser das HTML verarbeitet hat. --- ## Übungen ### 1. Das Dokument erkunden Öffne eine beliebige Webseite und gib in der Konsole diese Befehle ein: ```js console.log(document); console.log(document.title); console.log(document.body); ``` **Frage:** Was geben die drei Befehle jeweils aus? --- ### 2. Den Seitentitel ändern Erstelle eine HTML-Seite mit einem `Klicke später auf den Button.
``` ```js const titel = document.querySelector("#seiten-titel"); const hinweis = document.querySelector(".hinweis"); const weiterButton = document.querySelector("#weiter-button"); console.log(titel.textContent); console.log(hinweis.textContent); console.log(weiterButton.textContent); ``` In der Konsole erscheinen die Texte der drei gefundenen Elemente. --- ## Merksatz > Mit `document.querySelector()` findest du das **erste HTML-Element**, das zu einem CSS-Selektor passt. Die wichtigsten Selektoren für den Anfang sind: ```js document.querySelector("p"); // Elementname document.querySelector(".hinweis"); // Klasse document.querySelector("#menu"); // ID ``` Im nächsten Schritt kannst du die gefundenen Elemente verändern: Texte austauschen, CSS-Klassen hinzufügen oder entfernen und auf Klicks reagieren. # Inhalte und CSS-Klassen ändern ## Lernziele Auf dieser Seite lernst du, wie du mit JavaScript sichtbare Inhalte einer Webseite veränderst. Danach kannst du: - Text in HTML-Elementen austauschen - HTML-Inhalte gezielt einfügen - CSS-Klassen hinzufügen, entfernen und umschalten - den Zustand eines Elements prüfen - eine kleine interaktive Oberfläche bauen --- ## Inhalte mit `textContent` ändern Nachdem du ein Element mit `querySelector()` ausgewählt hast, kannst du seinen Text über die Eigenschaft `textContent` lesen oder verändern. ```htmlWillkommen!
``` ```js const nachricht = document.querySelector(".nachricht"); const aendernButton = document.querySelector(".aendern-button"); aendernButton.addEventListener("click", function () { nachricht.textContent = "Der Text wurde geändert."; }); ``` Beim Klick auf den Button wird der bisherige Inhalt des Absatzes ersetzt. > **Merke:** `textContent` behandelt seinen Inhalt als reinen Text. HTML-Tags werden dabei nicht als HTML ausgeführt. ```js nachricht.textContent = "Hallo"; ``` Im Browser erscheint dann tatsächlich: ```text Hallo ``` Das ist oft sinnvoll, weil Inhalte auf diese Weise sicher als Text ausgegeben werden. --- ## Inhalte mit `innerHTML` ändern Mit `innerHTML` kannst du nicht nur Text, sondern auch HTML-Code in ein Element einsetzen. ```html ``` ```js const info = document.querySelector(".info"); info.innerHTML = "Heute ist ein guter Tag."; ``` Das Ergebnis im Browser lautet: > Heute ist **ein guter Tag**. Auch Listen oder mehrere Elemente lassen sich einsetzen: ```js info.innerHTML = `Die Lampe ist aus.
``` Und dieses CSS: ```css .status { padding: 12px; background-color: #eeeeee; color: #222222; } .an { background-color: #fff3a3; color: #7a4b00; font-weight: bold; } ``` Die Klasse `status` sorgt für das normale Aussehen. Die Klasse `an` soll zusätzlich erscheinen, wenn die Lampe eingeschaltet ist. --- ## Eine Klasse hinzufügen: `classList.add()` Mit `classList.add()` fügst du einem Element eine CSS-Klasse hinzu. ```js const status = document.querySelector(".status"); status.classList.add("an"); ``` Danach hat der Absatz beide Klassen: ```htmlDie Lampe ist aus.
``` Die CSS-Regeln von `.an` werden nun angewendet. Du kannst auch mehrere Klassen gleichzeitig hinzufügen: ```js status.classList.add("an", "hervorgehoben"); ``` --- ## Eine Klasse entfernen: `classList.remove()` Mit `classList.remove()` entfernst du eine Klasse wieder. ```js status.classList.remove("an"); ``` Das Element besitzt anschließend nur noch die Klasse `status`. Auch hier sind mehrere Klassen möglich: ```js status.classList.remove("an", "hervorgehoben"); ``` --- ## Eine Klasse umschalten: `classList.toggle()` Besonders praktisch ist `classList.toggle()`. Die Methode prüft automatisch: - Ist die Klasse noch nicht vorhanden? Dann wird sie hinzugefügt. - Ist die Klasse schon vorhanden? Dann wird sie entfernt. ```js status.classList.toggle("an"); ``` Damit eignet sich `toggle()` hervorragend für Schalter, Menüs, Akkordeons oder einen Dark Mode. ### Beispiel: Dunklen Modus umschalten ```htmlDieser Bereich kann sein Aussehen ändern.
JavaScript wird direkt im Browser ausgeführt.
``` ### CSS ```css .hinweis { margin-top: 16px; padding: 12px; border-left: 4px solid #2c7a7b; background-color: #e6fffa; } .versteckt { display: none; } ``` ### JavaScript ```js const hinweisButton = document.querySelector(".hinweis-button"); const hinweis = document.querySelector(".hinweis"); hinweisButton.addEventListener("click", function () { hinweis.classList.toggle("versteckt"); if (hinweis.classList.contains("versteckt")) { hinweisButton.textContent = "Hinweis anzeigen"; } else { hinweisButton.textContent = "Hinweis ausblenden"; } }); ``` ### Was passiert hier? 1. Der Absatz startet mit der Klasse `versteckt`. 2. Diese Klasse setzt `display: none`. 3. Beim Klick schaltet `toggle("versteckt")` die Klasse um. 4. `contains("versteckt")` prüft anschließend den neuen Zustand. 5. Der Buttontext wird passend angepasst. ✨ So entsteht eine einfache, aber echte Interaktion. --- ## Alternative: Klassen vollständig ersetzen Manchmal möchtest du die gesamte Klassenliste ersetzen. Dafür gibt es `className`. ```js const box = document.querySelector(".box"); box.className = "box erfolg"; ``` Danach besitzt das Element genau die Klassen `box` und `erfolg`. Diese Schreibweise ist möglich, aber `classList` ist in vielen Situationen besser lesbar und sicherer. Wenn du nur eine einzelne Klasse ändern möchtest, verwende daher meist: ```js box.classList.add("erfolg"); ``` oder: ```js box.classList.remove("fehler"); ``` --- ## Komplettes Beispiel: Richtige und falsche Antwort anzeigen Dieses Beispiel verbindet Textänderungen und CSS-Klassen. Beim Klick auf einen Button erscheint eine Rückmeldung. ### HTML ```htmlWelche Sprache macht Webseiten interaktiv?
``` ### CSS ```css .rueckmeldung { margin-top: 16px; padding: 12px; font-weight: bold; } .richtig { background-color: #d9f7df; color: #176b2c; } .falsch { background-color: #ffe0e0; color: #9b1c1c; } ``` ### JavaScript ```js const antwortButtons = document.querySelectorAll(".antwort-button"); const rueckmeldung = document.querySelector(".rueckmeldung"); antwortButtons.forEach(function (button) { button.addEventListener("click", function () { rueckmeldung.classList.remove("richtig", "falsch"); if (button.textContent === "JavaScript") { rueckmeldung.textContent = "Richtig! JavaScript macht Webseiten interaktiv."; rueckmeldung.classList.add("richtig"); } else { rueckmeldung.textContent = "Noch nicht richtig. HTML beschreibt die Struktur einer Webseite."; rueckmeldung.classList.add("falsch"); } }); }); ``` ### Wichtige Beobachtungen - `querySelectorAll()` wählt beide Buttons aus. - `forEach()` richtet für jeden Button einen Klick-Listener ein. - Vor jeder neuen Rückmeldung werden die alten Klassen entfernt. - Die neue Rückmeldung erhält entweder die Klasse `richtig` oder `falsch`. Ohne das vorherige `remove()` könnte eine Rückmeldung gleichzeitig beide Klassen besitzen. Das führt leicht zu widersprüchlichem CSS. --- ## Häufige Fehler ### Die Klasse wird ohne Punkt geschrieben Bei `querySelector()` benötigst du für eine Klasse einen Punkt: ```js const box = document.querySelector(".box"); ``` Bei `classList.add()` schreibst du den Klassennamen **ohne** Punkt: ```js box.classList.add("aktiv"); ``` Das hier wäre falsch: ```js box.classList.add(".aktiv"); ``` --- ### JavaScript findet das Element nicht Wenn dieses Ergebnis erscheint: ```text Cannot read properties of null ``` wurde das Element wahrscheinlich nicht gefunden. Prüfe: - Ist der Klassenname im HTML korrekt? - Steht im Selektor ein Punkt vor dem Klassennamen? - Wird das JavaScript erst ausgeführt, nachdem das HTML geladen wurde? Eine einfache Lösung ist, das ` ``` Dann existieren die HTML-Elemente bereits, wenn JavaScript gestartet wird. --- ### Die alte Klasse bleibt erhalten Wenn ein Element nur eine von zwei Zustandsklassen haben soll, entferne zuerst beide möglichen Klassen: ```js rueckmeldung.classList.remove("richtig", "falsch"); ``` Danach fügst du die gewünschte Klasse hinzu: ```js rueckmeldung.classList.add("richtig"); ``` --- ## Übung Erstelle einen Button mit der Aufschrift „Details anzeigen“. Beim Klick soll ein Textabschnitt sichtbar werden. Der Button soll danach „Details ausblenden“ heißen. Beim nächsten Klick soll der Abschnitt wieder verschwinden. Nutze dafür: - `querySelector()` - `addEventListener()` - `classList.toggle()` - `classList.contains()` - `textContent` ### Mögliche Lösung ```htmlDiese zusätzlichen Informationen sind zunächst verborgen.
``` ```css .versteckt { display: none; } ``` ```js const detailsButton = document.querySelector(".details-button"); const details = document.querySelector(".details"); detailsButton.addEventListener("click", function () { details.classList.toggle("versteckt"); if (details.classList.contains("versteckt")) { detailsButton.textContent = "Details anzeigen"; } else { detailsButton.textContent = "Details ausblenden"; } }); ``` --- ## Zusammenfassung Mit JavaScript kannst du Inhalte und das Aussehen einer Webseite direkt verändern: - `textContent` setzt oder liest reinen Text. - `innerHTML` setzt HTML-Inhalte. - `classList.add()` fügt eine Klasse hinzu. - `classList.remove()` entfernt eine Klasse. - `classList.toggle()` schaltet eine Klasse ein oder aus. - `classList.contains()` prüft, ob eine Klasse vorhanden ist. Damit hast du ein wichtiges Werkzeug für interaktive Webseiten: Du kannst auf Aktionen reagieren und sichtbares Feedback geben. Im nächsten Schritt lernst du, Ereignisse mit `addEventListener()` noch gezielter einzusetzen. # Ereignisse mit `addEventListener()` ## Lernziele Nach dieser Lektion kannst du: - auf Benutzeraktionen wie Klicks und Eingaben reagieren, - mit `addEventListener()` Ereignisse überwachen, - Funktionen als Reaktion auf Ereignisse ausführen, - Informationen über das Ereignis mit dem Event-Objekt nutzen, - typische Fehler beim Arbeiten mit Ereignissen vermeiden. --- ## Was sind Ereignisse? Eine Webseite reagiert nicht von allein auf Benutzerinnen und Benutzer. Erst durch JavaScript kann sie auf Aktionen eingehen. Solche Aktionen heißen **Ereignisse** oder auf Englisch *Events*. Beispiele sind: - Ein Button wird angeklickt: `click` - Text wird in ein Eingabefeld geschrieben: `input` - Ein Formular wird abgeschickt: `submit` - Die Maus bewegt sich über ein Element: `mouseover` - Eine Taste wird gedrückt: `keydown` Mit `addEventListener()` sagst du JavaScript: > „Wenn dieses Ereignis passiert, führe eine bestimmte Funktion aus.“ --- ## Die Grundstruktur von `addEventListener()` Die Methode wird auf einem HTML-Element aufgerufen: ```js element.addEventListener("ereignis", funktion); ``` Dabei bedeutet: - `element`: Das ausgewählte HTML-Element, zum Beispiel ein Button. - `"ereignis"`: Der Name des Ereignisses als String, zum Beispiel `"click"`. - `funktion`: Der Code, der beim Ereignis ausgeführt werden soll. Ein einfaches Beispiel: ```js const button = document.querySelector("button"); button.addEventListener("click", begruessen); function begruessen() { console.log("Der Button wurde angeklickt."); } ``` Sobald jemand auf den Button klickt, erscheint die Nachricht in der Browser-Konsole. --- ## Ein Button reagiert auf einen Klick Erstelle zunächst eine HTML-Datei mit einem Button und einem Absatz: ```htmlNoch kein Klick.
``` Nun wählst du beide Elemente mit JavaScript aus: ```js const halloButton = document.querySelector("#hallo-button"); const ausgabe = document.querySelector("#ausgabe"); ``` Danach fügst du den Event Listener hinzu: ```js halloButton.addEventListener("click", zeigeBegruessung); function zeigeBegruessung() { ausgabe.textContent = "Hallo! Schön, dass du da bist."; } ``` **Ablauf:** 1. JavaScript sucht den Button über `#hallo-button`. 2. JavaScript wartet auf einen Klick auf diesen Button. 3. Beim Klick wird `zeigeBegruessung()` ausgeführt. 4. Der Text im Absatz wird verändert. --- ## Funktion übergeben, nicht sofort aufrufen Ein häufiger Anfängerfehler sieht so aus: ```js halloButton.addEventListener("click", zeigeBegruessung()); ``` Das ist falsch, weil die Funktion durch die Klammern sofort ausgeführt wird — also schon beim Laden der Seite. Richtig ist: ```js halloButton.addEventListener("click", zeigeBegruessung); ``` Hier übergibst du die Funktion als Anweisung für später. JavaScript führt sie erst aus, wenn das Ereignis eintritt. > **Merke:** Bei `addEventListener()` steht der Funktionsname normalerweise ohne Klammern. --- ## Eine anonyme Funktion verwenden Du kannst die Funktion auch direkt in `addEventListener()` schreiben. Das nennt man eine **anonyme Funktion**, weil sie keinen eigenen Namen hat. ```js halloButton.addEventListener("click", function () { ausgabe.textContent = "Hallo! Schön, dass du da bist."; }); ``` Oft wird dafür die kürzere Pfeilfunktion verwendet: ```js halloButton.addEventListener("click", () => { ausgabe.textContent = "Hallo! Schön, dass du da bist."; }); ``` Für kurze Reaktionen ist diese Schreibweise sehr praktisch. ```js const button = document.querySelector("#hallo-button"); button.addEventListener("click", () => { console.log("Klick erkannt!"); }); ``` Wenn dieselbe Funktion an mehreren Stellen gebraucht wird oder der Code länger wird, ist eine benannte Funktion meist übersichtlicher. --- ## Einen Zähler bauen Ein Klickzähler ist ein gutes erstes Beispiel für ein interaktives Element. ### HTML ```htmlAnzahl der Klicks: 0
``` ### JavaScript ```js const zaehlButton = document.querySelector("#zaehl-button"); const anzahlAnzeige = document.querySelector("#anzahl"); let anzahlKlicks = 0; zaehlButton.addEventListener("click", () => { anzahlKlicks = anzahlKlicks + 1; anzahlAnzeige.textContent = anzahlKlicks; }); ``` Die Variable `anzahlKlicks` speichert den aktuellen Wert. Bei jedem Klick wird sie um eins erhöht und anschließend im `` angezeigt. Du kannst die Kurzschreibweise `++` verwenden: ```js anzahlKlicks++; ``` Die Funktion könnte dann so aussehen: ```js zaehlButton.addEventListener("click", () => { anzahlKlicks++; anzahlAnzeige.textContent = anzahlKlicks; }); ``` --- ## Auf Eingaben reagieren Nicht nur Klicks können Ereignisse auslösen. Mit dem Ereignis `input` reagiert JavaScript auf jede Änderung in einem Eingabefeld. ### HTML ```html ``` ### JavaScript ```js const namensfeld = document.querySelector("#name"); const begruessung = document.querySelector("#begrüßung"); namensfeld.addEventListener("input", () => { const name = namensfeld.value; begruessung.textContent = "Hallo, " + name + "!"; }); ``` Die Eigenschaft `.value` liefert den aktuellen Inhalt eines Eingabefelds. Wenn im Feld noch nichts steht, wäre die Ausgabe „Hallo, !“. Das kannst du mit einer Bedingung verbessern: ```js namensfeld.addEventListener("input", () => { const name = namensfeld.value; if (name === "") { begruessung.textContent = ""; } else { begruessung.textContent = "Hallo, " + name + "!"; } }); ``` --- ## Das Event-Objekt Wenn ein Ereignis passiert, übergibt JavaScript zusätzliche Informationen an deine Funktion. Diese Informationen stecken im **Event-Objekt**. ```js button.addEventListener("click", (event) => { console.log(event); }); ``` Der Name `event` ist frei wählbar. Häufig werden auch `e` oder `ereignis` verwendet: ```js button.addEventListener("click", (e) => { console.log(e); }); ``` Für Anfängerinnen und Anfänger ist `event` meist am verständlichsten. --- ## Das Element herausfinden, das geklickt wurde Mit `event.target` erfährst du, welches Element das Ereignis ausgelöst hat. ```html ``` ```js const farbButtons = document.querySelectorAll(".farbe-button"); farbButtons.forEach((button) => { button.addEventListener("click", (event) => { console.log(event.target.textContent); }); }); ``` Klickst du auf „Grün“, gibt die Konsole aus: ```text Grün ``` `event.target` ist also das Element, auf das tatsächlich geklickt wurde. --- ## Ein Formular abschicken Bei Formularen ist das Ereignis `submit` besonders wichtig. ### HTML ```html ``` ### JavaScript ```js const formular = document.querySelector("#kontakt-formular"); const meldung = document.querySelector("#meldung"); formular.addEventListener("submit", (event) => { event.preventDefault(); meldung.textContent = "Vielen Dank! Das Formular wurde verarbeitet."; }); ``` Normalerweise lädt der Browser nach dem Absenden eines Formulars die Seite neu oder wechselt zu einer anderen Adresse. Mit ```js event.preventDefault(); ``` verhinderst du dieses Standardverhalten. Das ist hilfreich, wenn JavaScript die Eingaben zunächst prüfen oder direkt auf der Seite verarbeiten soll. > **Wichtig:** Höre bei Formularen auf `submit`, nicht nur auf den Klick des Absende-Buttons. So funktioniert die Verarbeitung auch, wenn jemand die Eingabetaste drückt. --- ## Klassen beim Klick umschalten Mit einem Ereignis kannst du auch das Aussehen eines Elements verändern. ### HTML ```htmlDieser Text kann hervorgehoben werden.
``` ### CSS ```css .hervorgehoben { background-color: gold; color: black; font-weight: bold; padding: 8px; } ``` ### JavaScript ```js const designButton = document.querySelector("#design-button"); const text = document.querySelector("#text"); designButton.addEventListener("click", () => { text.classList.toggle("hervorgehoben"); }); ``` `classList.toggle()` funktioniert in zwei Richtungen: - Ist die Klasse noch nicht vorhanden, wird sie hinzugefügt. - Ist die Klasse bereits vorhanden, wird sie entfernt. Jeder Klick schaltet das Aussehen also um. --- ## Mehrere Ereignisse für ein Element Ein Element kann auf mehrere Ereignisse reagieren. ```js const feld = document.querySelector("#name"); feld.addEventListener("focus", () => { console.log("Das Eingabefeld ist aktiv."); }); feld.addEventListener("blur", () => { console.log("Das Eingabefeld wurde verlassen."); }); ``` Dabei bedeutet: - `focus`: Das Element erhält den Fokus, etwa durch einen Klick ins Feld. - `blur`: Das Element verliert den Fokus, etwa durch einen Klick außerhalb des Felds. Du kannst auch mehrere Listener für dasselbe Ereignis registrieren: ```js button.addEventListener("click", () => { console.log("Erste Reaktion"); }); button.addEventListener("click", () => { console.log("Zweite Reaktion"); }); ``` Bei einem Klick werden beide Funktionen ausgeführt. --- ## Häufige Ereignisse im Überblick | Ereignis | Wann passiert es? | Typisches Beispiel | |---|---|---| | `click` | Ein Element wird angeklickt | Button bedienen | | `input` | Der Inhalt eines Felds ändert sich | Text beim Tippen anzeigen | | `change` | Ein Wert wurde geändert und bestätigt | Auswahlfeld auswerten | | `submit` | Ein Formular wird abgeschickt | Formulardaten prüfen | | `keydown` | Eine Taste wird gedrückt | Tastenkürzel erkennen | | `focus` | Ein Element wird aktiv | Eingabefeld hervorheben | | `blur` | Ein Element verliert den Fokus | Eingabe prüfen | | `mouseover` | Die Maus fährt über ein Element | Hinweis anzeigen | --- ## Typische Fehler und ihre Lösungen ### Das Element wurde nicht gefunden ```js const button = document.querySelector("#mein-button"); button.addEventListener("click", () => { console.log("Hallo"); }); ``` Wenn es kein Element mit der ID `mein-button` gibt, enthält `button` den Wert `null`. Dann entsteht ein Fehler. Prüfe deshalb: - Stimmt die ID im HTML genau mit dem Selektor überein? - Wird das JavaScript erst ausgeführt, nachdem das HTML geladen wurde? Eine gute Lösung ist, das Script mit `defer` einzubinden: ```html ``` Mit `defer` wartet der Browser, bis das HTML vollständig eingelesen wurde. --- ### Das Ereignis steht nicht in Anführungszeichen Falsch: ```js button.addEventListener(click, starte); ``` Richtig: ```js button.addEventListener("click", starte); ``` Der Ereignisname ist ein String und braucht deshalb Anführungszeichen. --- ### Die Funktion wird zu früh ausgeführt Falsch: ```js button.addEventListener("click", starte()); ``` Richtig: ```js button.addEventListener("click", starte); ``` Die Klammern rufen eine Funktion sofort auf. Ohne Klammern wird die Funktion für den späteren Klick gespeichert. --- ### `preventDefault()` fehlt beim Formular Wenn sich die Seite beim Absenden direkt neu lädt, fehlt wahrscheinlich diese Zeile: ```js event.preventDefault(); ``` Sie muss innerhalb der Funktion für das `submit`-Ereignis stehen. --- ## Praxisbeispiel: Eine Aufgabenliste mit Rückmeldung Dieses kleine Beispiel verbindet Klicks, Eingaben und Bedingungen. ### HTML ```htmlJavaScript kann auf Benutzeraktionen reagieren.
``` ### Vorgabe: CSS ```css .versteckt { display: none; } ``` ### Aufgabe 1. Wähle Button und Absatz mit `querySelector()` aus. 2. Reagiere auf das `click`-Ereignis des Buttons. 3. Schalte beim Klick die Klasse `versteckt` am Absatz um. 4. Ändere den Button-Text passend: - Ist der Text sichtbar, soll der Button „Information ausblenden“ zeigen. - Ist der Text versteckt, soll der Button „Information anzeigen“ zeigen. --- ## Mögliche Lösung ```js const infoButton = document.querySelector("#info-button"); const infoText = document.querySelector("#info-text"); infoButton.addEventListener("click", () => { infoText.classList.toggle("versteckt"); if (infoText.classList.contains("versteckt")) { infoButton.textContent = "Information anzeigen"; } else { infoButton.textContent = "Information ausblenden"; } }); ``` `classList.contains("versteckt")` prüft, ob ein Element diese Klasse gerade besitzt. Das Ergebnis ist entweder `true` oder `false`. --- ## Zusammenfassung Mit `addEventListener()` machst du Webseiten interaktiv: ```js element.addEventListener("click", () => { // Code für den Klick }); ``` Wichtige Punkte sind: - Ereignisse wie `click`, `input` und `submit` lösen JavaScript-Code aus. - Die Funktion wird ohne Klammern an `addEventListener()` übergeben. - Mit dem Event-Objekt erhältst du zusätzliche Informationen, etwa über `event.target`. - `event.preventDefault()` verhindert das Standardverhalten, zum Beispiel beim Absenden eines Formulars. - Mit `classList.toggle()` kannst du CSS-Klassen bequem ein- und ausschalten. Damit kennst du die zentrale Verbindung zwischen Benutzeraktionen und JavaScript-Code — eine wichtige Grundlage für jede interaktive Webseite.