Eine Vorstellung wählen

Jetzt kommt der Hauptteil: die Tickets. Jede Zeile der Tabelle bekommt einen Button, Plätze wählen. Ein Klick darauf öffnet unter der Tabelle die Platzwahl, mit Tag, Uhrzeit und Film in der Überschrift. In dieser Übung baust du die Platzwahl ein und öffnest sie; die Plätze selbst kommen in der nächsten.

Die Platzwahl ist ein Abschnitt von programm.html unter der Tabelle:

<section id="platzwahl" hidden>
    <h2 id="platzwahl-titel"></h2>
</section>

Das Attribut hidden blendet ein Element aus. Ein Skript zeigt es mit platzwahl.hidden = false; an, und mit true blendet es das Element wieder aus. Das ist praktisch für Teile einer Seite, die noch nicht gebraucht werden.

Die Buttons erstellt zeigeVorstellungen(), jeden in einer fünften Zelle seiner Zeile. (Füge auch der Kopfzeile ein fünftes, leeres th hinzu, damit die Linie unter den Überschriften auch über den Buttons verläuft.) Der Klick-Handler jedes Buttons muss wissen, welche Vorstellung in seiner Zeile steht. Erstelle ihn innerhalb der Schleife, wie du es bei den Favoriten im Checkpoint Filmabend getan hast, und er merkt sich die Vorstellung aus seinem eigenen Durchlauf der Schleife:

button.addEventListener("click", function () {
    waehleVorstellung(vorstellung);
});

Die Funktion waehleVorstellung() schreibst du selbst: Sie füllt die Überschrift und zeigt die Platzwahl. In den nächsten Übungen tut sie mehr.