Auswahllisten und Checkboxen

Statt zu tippen, wählt der Nutzer oft einfach aus. Eine Auswahlliste ist das Element select mit einem option-Element für jede Auswahl:

<select id="getraenk">
    <option value="tee">Tee</option>
    <option value="kaffee" selected>Kaffee</option>
    <option value="saft">Saft</option>
</select>

Der Text zwischen den Tags ist das, was der Nutzer sieht, und das Attribut value ist das, was dein Skript bekommt: Der value des select ist der value der gewählten Option. Wenn die Seite geladen wird, ist das "kaffee", weil das Attribut selected seine Option im Voraus auswählt. Wie bei einem Textfeld ist der Wert immer Text.

Eine Checkbox ist ein input mit type="checkbox":

<input id="zucker" type="checkbox">
<label for="zucker">Mit Zucker</label>

Das Element label ist der Text, der zu einem Feld gehört. Sein Attribut for enthält die id des Feldes, sodass ein Klick auf den Text auch das Kästchen ankreuzt. Ob das Kästchen angekreuzt ist, steht in seiner Eigenschaft checked: true oder false. Verwende hier nicht value: Der Wert einer Checkbox ist der Text "on", ob angekreuzt oder nicht.

Wenn der Nutzer eine andere Option wählt oder das Kästchen an- oder abwählt, bekommt das Element das Ereignis change:

const getraenkSelect = document.querySelector("#getraenk");
const zuckerCheckbox = document.querySelector("#zucker");
const bestellung = document.querySelector("#bestellung");

function zeigeBestellung() {
    if (zuckerCheckbox.checked) {
        bestellung.textContent = `Deine Bestellung: ${getraenkSelect.value} mit Zucker`;
    } else {
        bestellung.textContent = `Deine Bestellung: ${getraenkSelect.value}`;
    }
}

getraenkSelect.addEventListener("change", zeigeBestellung);
zuckerCheckbox.addEventListener("change", zeigeBestellung);

Beide Elemente führen dieselbe Funktion aus, und sie liest beide aus, also passt die Bestellung immer zu dem, was gewählt ist, egal welches der beiden sich geändert hat. zuckerCheckbox.checked ist schon true oder false und kann deshalb allein die Bedingung sein.

Auch Textfelder bekommen change, aber erst, wenn der Nutzer fertig ist: wenn er ein Feld verlässt, dessen Text er geändert hat, oder darin Enter drückt. Um schon beim Tippen zu reagieren, verwende input.