Einen Tag wählen

Am Samstagmorgen will ein Besucher wissen, was heute läuft, nicht das ganze Wochenende. Füge über der Tabelle Buttons für die Tage hinzu: Alle Tage, Freitag, Samstag und Sonntag. Ein Klick auf einen Tag zeigt nur seine Vorstellungen.

Jeder Button teilt dem Skript seinen Tag in einem Attribut data-tag mit, wie in der Lektion Ereignisse und Formulare. Die Tage sind genau so geschrieben wie in programm.json, damit das Skript sie mit === vergleichen kann:

<div id="tage">
    <button data-tag="alle" class="aktiv">Alle Tage</button>
    <button data-tag="Freitag">Freitag</button>
    <button data-tag="Samstag">Samstag</button>
    <button data-tag="Sonntag">Sonntag</button>
</div>

Die Buttons haben keine ids. Gib #tage einen Klick-Handler und finde den angeklickten Button mit event.target.closest("button"); ein Klick neben den Buttons ergibt null. Halte den gewählten Tag in einer Variablen, gewaehlterTag, die mit "alle" beginnt. Zeichne in zeigeVorstellungen() nur die Vorstellungen des gewählten Tages, mit filter(), außer es ist "alle". Lade die Datei nicht noch einmal: Zeichne die Tabelle aus den Vorstellungen, die du schon hast, einfach neu.

Der gewählte Button. Der Besucher soll sehen, welchen Tag er gerade anschaut, deshalb hat der gewählte Button die Klasse aktiv. Am Anfang ist es Alle Tage, also hat dieser Button die Klasse schon im HTML. Merke dir den aktiven Button in einer Variablen, so wie du dir in der Lektion Ereignisse und Formulare das gewählte Rezept gemerkt hast: Bei einem Klick entfernst du die Klasse von ihm, fügst sie dem angeklickten Button hinzu und speicherst den angeklickten Button in der Variablen. Den ersten aktiven Button findest du mit einem Selektor wie in CSS, dem Element mit der Klasse aktiv in #tage:

let aktiverTagButton = document.querySelector("#tage .aktiv");

Typische Fehler:

• Ein Tag, der im Button anders geschrieben ist als in den Daten, zum Beispiel data-tag="freitag". "freitag" === "Freitag" ist false, also bleibt die Tabelle leer.
• Die Klasse vom alten Button zu entfernen vergessen: Nach ein paar Klicks sehen alle Buttons gewählt aus.