Zjištění hodnoty políček INPUT, TEXTAREA a SELECT

Zjištění hodnoty

Pokud jste vnímali souvislosti při výkladu fotogalerie, nebude to pro vás překvapivé:

U libovolného políčka typu běžný input, textarea nebo select,
zjistíme jeho hodnotu (tj. hodnotu jeho atributu value, viz kapitola HTML formuláře) jako

document.querySelector("#polickoID").value

Malá odbočka: Předpokládám, že vás (stejně jako mě) nebaví psát pořád dokola kód

document.querySelector("#polickoID")...

Je to poměrně otravné (i s našeptávačem), takže to už kdysi kdosi vyřešil "pojmenováním" políčka:

let poleVek = document.querySelector("#vek") ;

Zápis čtěte jako: Vezmi políčko s id="vek" a pro potřeby našeho JS kódu ho pojmenuj poleVek.
Políčko je tím pojmenované a v dalším kódu už nemusíme psát "dlouhý kód"

document.querySelector("#vek").value ;

protože stejný význam bude mít i kratší zápis

poleVek.value ;

Po programátorsku: Vytvořili jsme proměnnou se jménem poleVek
a vložili jsme do ní element document.querySelector("#vek").

Proměnné už známe z CSS nebo Pythonu, v JS je to stejné...

Všimněte si, že tento postup je obdobný pojmenování funkce, které jsme si už také ukazovali.

Jen nepojmenováváme nějakou "sadu příkazů", ale hodnotu.

Příklad 1

Vložte si do formuláře správně (tj. i s atributem id) políčko input, textarea nebo select.
Políčko si pojmenujte (v JS - tedy v souboru script.js), např.
```
let poleVek = document.querySelector("#vek")
```
Nadefinujeme si pro políčko hlídače události "change", který
při každé změně políčka vypíše aktuální hodnotu políčka
do připraveného "zeleného" div id="#vysledek":
```
poleVek.addEventListener("change", function() = {
  document.querySelector("#vysledek").innerHTML = poleVek.value ;
}); 
```
Poznámka:
Můžete si pojmenovat také "výstupový div" div id="vystup", např.
```
let = vystup document.querySelector("#vystup")
```
a pak můžete psát už jen kratší, přehlednější a možná i pochopitelnější zápis
```
poleVek.addEventListener("change", function() = { 
  vysledek.innerHTML = poleVek.value ;
}); 
```
Vyzkoušejte si měnit hodnotu svého políčka
a sledujte, jak se mění obsah "výstupového divu" div id="vystup".
Obohaťte funkci hlídače změn svého pole o vhodný doprovodný text, např. na
```
poleVek.addEventListener("change", function() {
  vysledek.innerHTML = "<p>Je Ti " + poleVek.value + " let, ahoj!</p>";
});
```
Výsledek bude "hezčí" (i z pohledu UX / UI :).

Příklad 2

Zkuste si naprogramovat typický příklad: kalkulačku.

Vložte si do formuláře políčka pro 2 čísla.
Vložte si do formuláře tlačítko button type="button".
Nastavte tlačítku pro událost click funkci, která
1. sečte hodnoty z obou políček a
2. výsledek zobrazí do "výstupního divu" div class="vystup".
(Čistě teoreticky: Bude to - jak je v JS obvyklé - "jeden dlouhý řádek pospojovaný tečkami"... :)

Můžete si přidat i další tlačítka pro odečítání, násobení nebo dělení.

S čím bude problém u operace dělení?

➜ Předchozí stránka Následující stránka ➜