Modul 7: Auf Klicks reagieren (Events)

lock
Bevorstehend

Buttons und Eingabefelder mit JavaScript verbinden – interaktive Webseiten bauen

Ziele dieses Moduls
  • Sie können Event-Handler fĂĽr Buttons erstellen und Werte aus Eingabefeldern auslesen und verarbeiten
    Anwenden

Events – auf Benutzeraktionen reagieren

Bisher lief unser JavaScript sofort beim Laden der Seite. Mit Events kann Code erst bei einer Benutzeraktion ausgeführt werden – z.B. bei einem Klick auf einen Button.

Button mit Funktion verbinden

<button onclick="meineFunktion()">Klick mich</button>

Wenn der Button geklickt wird, ruft der Browser automatisch meineFunktion() auf.

Eingabefeld auslesen

let wert = document.getElementById("mein-feld").value;

Das .value gibt den aktuellen Text im Eingabefeld zurĂĽck.

Challenge

Aufgabe – Events

  1. Lade die HTML-Datei herunter und öffne sie in VS Code.
  2. Klicke auf Button 1 und schau, was passiert. Ă„ndere dann den Text, der ausgegeben wird.
  3. Ergänze Button 2: Die Hintergrundfarbe der Seite soll auf Gelb geändert werden.
  4. Ergänze Button 3: Den Text aus dem Eingabefeld lesen und gross im h2 anzeigen.
  5. BONUS: Füge einen Zähler hinzu – jedes Mal wenn Button 1 gedrückt wird, soll die Zahl im Absatz «zaehler-anzeige» um 1 steigen.

⬇ aufgabe7.html herunterladen