Textová pole

Aby uživatel mohl něco napsat, používá stránka prvek input (vstup): textové pole, do kterého se píše. Nemá zavírací tag:

<input id="barva">

To, co je v poli napsané, najdete v jeho vlastnosti value (hodnota). Obvykle ji čtete, když uživatel klikne na tlačítko:

const vstupBarva = document.querySelector("#barva");
const tlacitkoUkazat = document.querySelector("#ukazat");
const odpoved = document.querySelector("#odpoved");

tlacitkoUkazat.addEventListener("click", function () {
    odpoved.textContent = `Vaše oblíbená barva je ${vstupBarva.value}.`;
});

value čtěte uvnitř obsluhy, v okamžiku kliknutí. Při načtení stránky je pole ještě prázdné, takže kdybyste na začátek skriptu napsali const barva = vstupBarva.value;, byl by v proměnné barva vždy prázdný text "".

value je vždy text, i když uživatel napíše číslice, a dokonce i v poli pro čísla <input type="number">. Už víte, že "40" + 4 je "404". Abyste mohli s hodnotou počítat, převeďte ji na číslo pomocí Number():

console.log("40" + 4);         // Vypíše: 404
console.log(Number("40") + 4); // Vypíše: 44

Pokud text není číslo, třeba "ahoj", vrátí Number() hodnotu NaN (z anglického Not a Number, tedy „není číslo“). A pro prázdné textové pole dá Number("") hodnotu 0.