Auf Klicks und Eingaben reagieren

IT 12.6 – Webanwendungen · Einheit 4 · Café-App Schritt 4

Lernziele

Du kannst wichtige Ereignisse nennen und beschreiben, wann sie eintreten.
Du kannst Ereignisbehandlungen mit addEventListener, mit der Eigenschaft onclick und mit dem Attribut onclick einrichten, die Unterschiede erläutern und die Schreibweisen aus Prüfungsaufgaben lesen.
Du kannst Werte aus Eingabefeldern lesen, umwandeln und verarbeiten.
Du kannst einen Zustand (zum Beispiel einen Warenkorb) in Variablen speichern und die Anzeige danach aktualisieren.

Rückblick

1. Was ist der Unterschied zwischen textContent und innerHTML?

textContent setzt reinen Text, innerHTML liest den Text als HTML. Für Eingaben immer textContent.

2. Was liefert getElementById, wenn es das Element nicht gibt?

null.

3. Welchen Datentyp hat ein Wert aus einem Eingabefeld?

Text (string), auch bei type="number". Zum Rechnen umwandeln.

Ein Warenkorb für das Café

Auf der Speisekarte sollen Schülerinnen und Schüler Produkte antippen und sofort sehen, was im Warenkorb liegt und was alles zusammen kostet. Bisher läuft JavaScript nur einmal, wenn die Seite geladen wird. Jetzt soll es reagieren: jedes Mal, wenn jemand tippt, klickt oder etwas eingibt.

Erkunden: Wann passiert was?

Bevor du weiterliest: Bearbeite die Erkundungen. Die Erklärungen weiter unten helfen dir erst danach.

Erkundung 1: Ereignisse beobachten mittel

Klicke, tippe und verlasse die Felder. Beobachte die Konsole unter der Vorschau.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Beschreibe, wann input und wann change beim Textfeld eintritt.

b) Ändere 'click' in 'dblclick' und dann in 'mouseover'. Beschreibe die Wirkung.

c) Gehe nur mit der Tastatur (Tab, Enter, Leertaste) auf den Knopf. Gib an, ob click auch dann eintritt.

Lösung

Erkundung 2: Drei Wege zum Klick mittel

Hier sind drei Knöpfe auf drei verschiedene Arten mit Funktionen verbunden. Jeder Knopf bekommt außerdem zwei Reaktionen.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Klicke auf alle drei Knöpfe. Beschreibe, was bei B und C in der Konsole erscheint, und erkläre den Unterschied.

b) Bei Knopf A steht die Verbindung im HTML. Beurteile diesen Weg mit Blick auf die Trennung von HTML und JavaScript.

c) Ändere die vorletzte Zeile in c.addEventListener('click', hallo('C')); (ohne () =>). Beschreibe, was jetzt passiert, schon bevor du klickst.

Lösung

Ereignisse

Vergleicht eure Ergebnisse. Ein Ereignis (event) ist etwas, das auf der Seite passiert: ein Klick, eine Eingabe, ein Tastendruck. JavaScript kann auf Ereignisse reagieren. Die Funktion, die dann läuft, heißt Ereignisbehandlung (event handler oder event listener).

Ereignis	tritt ein, wenn …	typisch für
`click`	ein Element angeklickt oder ein Knopf per Tastatur ausgelöst wird	Knöpfe, Links
`input`	sich der Inhalt eines Felds ändert (bei jedem Zeichen)	Suche, Live-Vorschau, Schieberegler
`change`	eine Änderung abgeschlossen ist (Feld verlassen, Auswahl getroffen)	Auswahllisten, Häkchen
`submit`	ein Formular abgeschickt wird	Formulare (Einheit 6)
`keydown`	eine Taste gedrückt wird	Tastenkürzel
`mouseover`	die Maus über ein Element fährt	nur Zusatzinfos, nicht auf dem Handy
`load` / `DOMContentLoaded`	die Seite fertig geladen bzw. das HTML gelesen ist	Start der Anwendung

Ereignisbehandlung einrichten

const knopf = document.getElementById('bestellen');

// 1. addEventListener (empfohlen): mehrere Reaktionen möglich
knopf.addEventListener('click', bestellen);
knopf.addEventListener('click', () => console.log('geklickt'));

// 2. Eigenschaft: nur eine Reaktion, eine neue überschreibt die alte
knopf.onclick = bestellen;

<!-- 3. Attribut im HTML: kurz, mischt aber JavaScript ins HTML -->
<button onclick="bestellen()">Bestellen</button>

Die Ereignisnamen schreibt man bei addEventListener ohne „on“ ('click', 'input'), bei Eigenschaft und Attribut mit „on“ (onclick, oninput, onchange). In HTML-Attributen ist die Groß- und Kleinschreibung egal (onChange geht auch), in JavaScript nicht.

Schreibweisen in Prüfungen

In Prüfungsaufgaben steht Code oft in anderen Schreibweisen als hier. Sie bewirken dasselbe. Du solltest sie lesen und auch selbst schreiben können.

function statt Pfeil: Eine Funktion ohne Namen (anonyme Funktion) kann man mit function () { … } oder mit () => { … } schreiben. Für Ereignisse ist beides gleichwertig.

document.getElementById('abstimmen').onclick = function () {
  stimmen++;
  anzeigen();
};

Attribut mit Argument: Im Attribut steht ein Aufruf mit Klammern. Der Browser führt ihn erst aus, wenn das Ereignis eintritt. Text-Argumente stehen in einfachen Anführungszeichen, weil das Attribut schon doppelte benutzt.

<button onclick="abstimmen('ja')">Ja</button>
<button onclick="abstimmen('nein')">Nein</button>

Die Funktion abstimmen muss im Skript ganz außen stehen, nicht in einer anderen Funktion. Sonst findet das Attribut sie nicht.

Weitere Attribute, die in Prüfungen vorkommen:

Attribut	tritt ein, wenn …
`oninput="…"`, `onchange="…"`	wie die Ereignisse `input` und `change`
`<form onsubmit="senden(event)">`	das Formular abgeschickt wird. `event` übergibt das Ereignisobjekt, damit die Funktion das Absenden mit `event.preventDefault()` verhindern kann (Einheit 6).
`<body onload="start()">`	die Seite fertig geladen ist. Das ersetzt `defer` oder `DOMContentLoaded`.

Knöpfe als HTML-Text erzeugen: Erzeugt JavaScript Knöpfe mit innerHTML, wird das Attribut als Text zusammengesetzt. Eine Zahl wird dabei in den Text eingefügt:

html += '<button onclick="abstimmen(' + vorschlag.nr + ')">Stimme</button>';
// ergibt zum Beispiel: <button onclick="abstimmen(4)">Stimme</button>

Werte lesen und verarbeiten

const anzahlFeld = document.getElementById('anzahl');
const ausgabe = document.getElementById('ausgabe');

anzahlFeld.addEventListener('input', () => {
  const anzahl = Number(anzahlFeld.value);   // .value ist Text
  ausgabe.textContent = preisFormatieren(anzahl * 1.5);
});

Element	Wert lesen
Textfeld, Zahlenfeld, Schieberegler, Auswahlliste, `textarea`	`.value` (immer Text)
Häkchen (`checkbox`), Optionsfeld (`radio`)	`.checked` (`true` oder `false`)

Man kann .value auch setzen, zum Beispiel feld.value = '', um ein Feld zu leeren.

Das Ereignisobjekt

Die Ereignisbehandlung bekommt ein Ereignisobjekt mit Angaben zum Ereignis:

document.addEventListener('keydown', (event) => {
  console.log(event.key);      // gedrückte Taste, z. B. 'Enter' oder 'a'
  console.log(event.target);   // Element, an dem das Ereignis eintrat
});

event.preventDefault() verhindert die Standardreaktion des Browsers, zum Beispiel das Neuladen beim Abschicken eines Formulars (Einheit 6). In Funktionen, die mit function geschrieben sind, zeigt außerdem this auf das Element, das die Reaktion ausgelöst hat (slider.oninput = function () { … this.value … }).

Zustand und Anzeige

Eine Anwendung merkt sich ihren Zustand in Variablen, zum Beispiel was im Warenkorb liegt. Bewährtes Muster:

Ein Ereignis ändert den Zustand (warenkorb.push(…)).
Danach wird eine Funktion aufgerufen, die die Anzeige komplett aus dem Zustand neu aufbaut.

let zaehler = 0;                              // Zustand

function anzeigen() {                         // Anzeige aus dem Zustand
  document.getElementById('zahl').textContent = zaehler;
}

document.getElementById('plus').addEventListener('click', () => {
  zaehler++;                                  // 1. Zustand ändern
  anzeigen();                                 // 2. Anzeige aktualisieren
});

So zeigt die Seite immer genau das, was in den Variablen steht, egal welches Ereignis zuletzt kam.

Café-App: Schritt 4

Café-App, Schritt 4: Der Warenkorb mittel

Ergänze in speisekarte.html in jeder Tabellenzeile eine vierte Spalte mit einem Knopf, zum Beispiel für den Kakao: <td><button class="hinzu" data-name="Kakao" data-preis="1.5" aria-label="Kakao in den Warenkorb">+</button></td> Ergänze im Tabellenkopf eine passende Spaltenüberschrift.

Ergänze unter der Tabelle einen Bereich für den Warenkorb:

<section id="warenkorb">
  <h2>Warenkorb</h2>
  <ul id="korb-liste"></ul>
  <p>Summe: <strong id="korb-summe">0,00 €</strong></p>
  <button id="korb-leeren">Warenkorb leeren</button>
</section>

Lege in app.js eine Variable warenkorb an (eine leere Liste) und eine Funktion warenkorbAnzeigen(), die die Liste und die Summe aus dem Warenkorb neu aufbaut. Ist der Warenkorb leer, steht dort „Noch leer.“
Jeder Knopf mit der Klasse hinzu fügt beim Klick ein Objekt { name: …, preis: … } zum Warenkorb hinzu.
„Warenkorb leeren“ leert die Liste.
Auf Seiten ohne Warenkorb darf kein Fehler entstehen.

Tipp 1

Die Angaben data-name und data-preis liest du mit knopf.dataset.name und knopf.dataset.preis. Der Preis ist Text, also umwandeln.

Tipp 2

Alle Knöpfe findest du mit document.querySelectorAll('.hinzu'). Durchlaufe sie mit forEach und hänge an jeden einen click-Listener.

Tipp 3

Ein Objekt zum Warenkorb hinzufügen: warenkorb.push({ name: 'Kakao', preis: 1.5 });. Leeren: warenkorb = []; (dafür muss warenkorb mit let angelegt sein).

Stand nach Schritt 4

Aufgaben

Aufgabe 1: Code lesen – Ablauf und Zweck leicht

In der Schulbücherei werden Ausleihen mit einer kleinen Webanwendung erfasst:

ausleihenKnopf.addEventListener('click', () => {
  const nummer = ausweisFeld.value.trim();
  const titel = titelFeld.value.trim();
  if (nummer.length === 6 && titel !== '') {
    ausleiheSpeichern(nummer, titel);
    titelFeld.value = '';
    meldung.textContent = 'Ausleihe gespeichert.';
  } else {
    meldung.textContent = 'Bitte Ausweisnummer (6 Zeichen) und Titel eingeben.';
  }
});

trim() entfernt Leerzeichen am Anfang und Ende eines Texts.

Beschreibe den Ablauf und den Zweck dieses Codes in eigenen Worten.

Lösung

Aufgabe 2: Temperatur umrechnen mittel

Während man eine Temperatur in Grad Celsius eingibt, soll darunter sofort der Wert in Grad Fahrenheit erscheinen: F = C · 9 / 5 + 32. Bei 25 steht dort 77 °F. Ist das Feld leer oder keine Zahl, steht dort Bitte eine Zahl eingeben.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Tipp 1

celsiusFeld.addEventListener('input', () => { … }); Darin: Wert lesen, prüfen, umrechnen, ausgeben.

Lösung

Aufgabe 3: Wo wird reagiert? mittel

<p>Strecke: <input type="range" id="km" min="0" max="50" value="10"> <span id="km-anzeige">10</span> km</p>
<button id="rechnen">Preis berechnen</button>
<p id="preis"></p>

const regler = document.getElementById('km');
const anzeige = document.getElementById('km-anzeige');

function anzeigeAktualisieren() {
  anzeige.textContent = regler.value;
}

function preisBerechnen() {
  const km = parseFloat(regler.value);
  document.getElementById('preis').textContent = (3 + km * 0.25).toFixed(2) + ' €';
}

regler.oninput = anzeigeAktualisieren;
document.getElementById('rechnen').addEventListener('click', preisBerechnen());

a) Ermittle die Zeilen, in denen festgelegt wird, was beim Bewegen des Reglers und beim Klick auf den Knopf passiert.

b) Der Knopf funktioniert nicht, und gleich beim Laden steht schon ein Preis da. Erkläre den Fehler und verbessere die Zeile.

c) Erläutere die Aufgabe von parseFloat in preisBerechnen.

Lösung

Aufgabe 4: Zeichen zählen mittel

Für eine Kurznachricht der SV sind höchstens 140 Zeichen erlaubt. Unter dem Textfeld soll beim Tippen stehen, wie viele Zeichen noch frei sind: Noch 140 Zeichen. Bei 10 oder weniger freien Zeichen bekommt die Anzeige die Klasse warnung, sonst nicht.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Lösung

Aufgabe 5: Ein Knopf statt zwei schwer

Der Fahrradverleih hat für jedes Rad zwei Knöpfe: „verliehen“ und „zurück“. Das soll ein Knopf werden:

Ist das Rad verfügbar, steht im Absatz #zustand der Text Rad 7: verfügbar, und der Knopf heißt Als verliehen markieren.
Ein Klick schaltet um: Rad 7: verliehen, Knopf Als verfügbar markieren. Der nächste Klick schaltet wieder zurück.

a) Entwickle die Lösung mit einer Variablen für den Zustand und einer Funktion für die Anzeige.

b) Beschreibe den Vorteil gegenüber zwei Knöpfen und zwei Funktionen.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Tipp 1

Umschalten eines Wahrheitswerts: verliehen = !verliehen;

Tipp 2

Die Anzeige-Funktion fragt nur if (verliehen) und setzt beide Texte. Der Klick ändert den Zustand und ruft dann die Anzeige-Funktion auf.

Lösung

Aufgabe 6: Schreibweisen umformen mittel

Bei der Theater-AG regelt ein Knopf die Lautstärke der Musik, höchstens bis Stufe 10:

<button id="lauter">+</button> Lautstärke: <span id="stufe">5</span>

let stufe = 5;
const anzeige = document.getElementById('stufe');

document.getElementById('lauter').addEventListener('click', () => {
  if (stufe < 10) {
    stufe++;
  }
  anzeige.textContent = stufe;
});

a) Schreibe den JavaScript-Code so um, dass die Eigenschaft onclick mit einer function verwendet wird.

b) Schreibe die Lösung mit dem Attribut onclick im HTML. Gib den geänderten HTML- und JavaScript-Code an.

c) Später soll ein anderes Skript am selben Knopf zusätzlich einen Klickton abspielen. Begründe, welche der drei Schreibweisen sich dafür eignet.

Löse a) und b) zuerst auf Papier wie in der Prüfung. Teste danach im Spielplatz.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Tipp 1

Bei a) bleibt der Inhalt der Funktion gleich. Nur die erste und die letzte Zeile ändern sich.

Tipp 2

Für b) braucht die Funktion einen Namen, zum Beispiel lauter. Sie muss im Skript ganz außen stehen. Im HTML gehört ein Aufruf mit Klammern in das Attribut.

Lösung

Aufgabe 7: Code lesen – Knöpfe aus Daten schwer

Im Fundbüro der Schule zeigt eine Liste alle Fundstücke, die noch nicht abgeholt wurden:

<ul id="liste"></ul>

const FUNDSTUECKE = [
  { nr: 1, was: 'Schal, blau', abgeholt: false },
  { nr: 2, was: 'Taschenrechner', abgeholt: true },
  { nr: 3, was: 'Turnbeutel', abgeholt: false },
];

function zeigeListe() {
  let html = '';
  for (const stueck of FUNDSTUECKE) {
    if (!stueck.abgeholt) {
      html += '<li>' + stueck.was;
      html += ' <button onclick="abholen(' + stueck.nr + ')">abgeholt</button></li>';
    }
  }
  document.getElementById('liste').innerHTML = html;
}

function abholen(nr) {
  const stueck = FUNDSTUECKE.find((s) => s.nr === nr);
  stueck.abgeholt = true;
  zeigeListe();
}

zeigeListe();

a) Gib den HTML-Code an, den zeigeListe beim Laden der Seite in die Liste schreibt.

b) Beschreibe Schritt für Schritt, was beim Klick auf den Knopf neben „Turnbeutel“ passiert.

c) Ein Mitschüler schreibt die Knopfzeile kürzer: html += ' <button onclick="abholen(stueck.nr)">abgeholt</button></li>'; Erkläre, warum die Knöpfe danach nicht mehr funktionieren.

Löse die Aufgabe zuerst auf Papier. Prüfe dann im Spielplatz. Wenn du in zeigeListe vor der letzten Zeile console.log(html); einfügst, siehst du das erzeugte HTML in der Konsole.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Tipp 1

Zu a): Gehe die drei Objekte einzeln durch. Welche überspringt das if? Setze für stueck.nr die Zahl in den Text ein.

Tipp 2

Zu c): Schreibe auf, was nach dieser Änderung wirklich im HTML steht. Was weiß der Browser beim Klick über stueck?

Lösung

Zusatzaufgabe: Tastenkürzel schwer Zusatz

Mit der Taste + soll sich der Zähler erhöhen, mit - verringern, aber nicht unter 0. Während jemand im Textfeld tippt, dürfen die Tasten den Zähler nicht verändern.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Lösung

Zusammenfassung

Ein Ereignis ist etwas, das auf der Seite passiert: click, input, change, submit, keydown …
Reaktionen einrichten mit addEventListener('click', funktion) (mehrere möglich), mit der Eigenschaft onclick = funktion (nur eine) oder mit dem Attribut onclick="…" im HTML.
Die Funktion übergeben, nicht aufrufen: bestellen, nicht bestellen(). Nur im Attribut steht der Aufruf mit Klammern: onclick="bestellen()".
In Prüfungen häufig: element.onclick = function () { … }; und Attribute wie onclick="abholen(3)", onsubmit="senden(event)", <body onload="start()">.
Werte lesen mit .value (Text) bzw. .checked (Wahrheitswert).
Das Ereignisobjekt liefert zum Beispiel event.key und event.target.
Muster: Ereignis → Zustand ändern → Anzeige neu aufbauen.
Echte button-Elemente verwenden: bedienbar mit Maus, Finger und Tastatur.

Selbstcheck

Geh die Fragen ehrlich durch. Wenn du bei einer unsicher bist, lies den verlinkten Abschnitt noch einmal oder bearbeite die passende Aufgabe.

Kannst du wichtige Ereignisse nennen? → Erkundung 1, Ereignisse
Kannst du Ereignisbehandlungen einrichten und die Wege vergleichen? → Erkundung 2, Ereignisbehandlung einrichten, Aufgabe 1, Aufgabe 3
Kannst du die Schreibweisen aus Prüfungsaufgaben lesen und selbst verwenden? → Schreibweisen in Prüfungen, Aufgabe 6, Aufgabe 7
Kannst du Werte aus Eingabefeldern lesen und verarbeiten? → Werte lesen und verarbeiten, Aufgabe 2, Aufgabe 4
Kannst du einen Zustand speichern und die Anzeige aktualisieren? → Zustand und Anzeige, Café-App, Aufgabe 5

Wortspeicher

Begriff	Bedeutung in einfachen Worten
Ereignis (event)	etwas, das auf der Seite passiert, zum Beispiel ein Klick
Ereignisbehandlung (event listener)	Funktion, die bei einem Ereignis aufgerufen wird
`addEventListener`	richtet eine Reaktion auf ein Ereignis ein
anonyme Funktion	Funktion ohne Namen, `function () { … }` oder `() => { … }`
`click`, `input`, `change`	Klick; jede Änderung eines Felds; abgeschlossene Änderung
`keydown`	eine Taste wird gedrückt
Ereignisobjekt	Angaben zum Ereignis, zum Beispiel die Taste oder das Element
`value` / `checked`	Inhalt eines Felds (Text) / ob ein Häkchen gesetzt ist
`dataset`	liest eigene Angaben aus `data-…`-Attributen
Zustand	was sich die Anwendung gerade merkt, zum Beispiel den Warenkorb

Quellen

Hessisches Kultusministerium: Kerncurriculum Fachoberschule, Fachrichtung Technik, Schwerpunkt Informationstechnik, Themenfeld 12.6 Webanwendungen, „interaktive Inhalte“, „dynamisches Aktualisieren der Darstellung“ (Stand November 2022).
Ereignisse nach dem HTML- und DOM-Standard (WHATWG). Freie Dokumentation: MDN Web Docs, developer.mozilla.org/de (Du verlässt jetzt Maternet).
Texte, Beispiele, Aufgaben und Code-Beispiele sind selbst erstellt.