Rozbalovací seznamy a zaškrtávací políčka

Uživatel často nepíše, ale vybírá. Rozbalovací seznam je prvek select a v něm je pro každou možnost jeden prvek option:

<select id="napoj">
    <option value="čaj">Čaj</option>
    <option value="káva" selected>Káva</option>
    <option value="džus">Džus</option>
</select>

Text mezi tagy vidí uživatel a atribut value (hodnota) dostane váš skript: value prvku select je hodnota vybrané možnosti. Po načtení stránky je to "káva", protože atribut selected svou možnost vybere předem. Stejně jako u textového pole je hodnota vždy text.

Zaškrtávací políčko je input s type="checkbox":

<input id="cukr" type="checkbox">
<label for="cukr">S cukrem</label>

Prvek label (popisek) je text, který k políčku patří. V atributu for má id políčka, takže políčko zaškrtne i kliknutí na text. Jestli je políčko zaškrtnuté, je ve vlastnosti checked: true, nebo false. Vlastnost value tu nepoužívejte: hodnota zaškrtávacího políčka je text "on", ať je zaškrtnuté, nebo ne.

Když uživatel vybere jinou možnost nebo políčko zaškrtne či odškrtne, prvek dostane událost change (změna):

const vyberNapoje = document.querySelector("#napoj");
const polickoCukr = document.querySelector("#cukr");
const objednavka = document.querySelector("#objednavka");

function ukazObjednavku() {
    if (polickoCukr.checked) {
        objednavka.textContent = `Vaše objednávka: ${vyberNapoje.value} s cukrem`;
    } else {
        objednavka.textContent = `Vaše objednávka: ${vyberNapoje.value}`;
    }
}

vyberNapoje.addEventListener("change", ukazObjednavku);
polickoCukr.addEventListener("change", ukazObjednavku);

Oba prvky spouštějí stejnou funkci a ta čte oba, takže objednávka vždy odpovídá tomu, co je vybrané, ať se změnil kterýkoli z nich. polickoCukr.checked už je true, nebo false, a tak může být podmínkou samo o sobě.

Událost change dostávají i textová pole, ale až když uživatel skončí: když stiskne Enter nebo opustí textové pole, jehož text změnil. Na psaní reagujte pomocí input.