Szövegmezők kezelése JavaScriptben
Most megtanuljuk, hogyan kaphatunk szöveget
a weboldalunk felhasználóitól. Erre a HTML-ben
létezik egy speciális input tag,
ami egy szövegbeviteli mezőt jelent az adatok
megadásához.
<input>
Ennek a tagnak van egy speciális value
attribútuma, amely a kezdeti szöveget határozza meg,
ami az input mezőben fog megjelenni a lap
megnyitásakor:
<input value="text">
Weboldalunk felhasználója a lap megnyitása után
megváltoztathatja az input szövegét.
Ekkor, ha van egy változónk, amely
tartalmazza az inputra mutató hivatkozást, akkor a value
tulajdonsága ennek a változónak mindig az input aktuális
szövegértékét fogja tartalmazni.
Próbáljuk ki a gyakorlatban. Legyen egy inputunk
a value attribútummal:
<input id="elem" value="text">
Kapjunk hivatkozást erre az inputra egy változóba:
let elem = document.querySelector('#elem');
És most írjuk ki a képernyőre az input aktuális szövegét:
console.log(elem.value);
És most változtassuk meg az input szövegét egy másikra:
elem.value = 'new text';
Adott egy input és egy gomb. A gomb megnyomásakor írjunk valamilyen szöveget az inputba.
Adott egy input, egy bekezdés és egy gomb. A gomb megnyomásakor írja a bekezdésbe az input szövegét.
Adott két input és egy gomb. Az első inputba a felhasználó egy számot ír. A gomb megnyomásakor írjuk a második inputba a beírt szám négyzetét.
Adott két input és egy gomb. A gomb megnyomásakor írja az első inputba a második input értékét, a második inputba pedig az első értékét. A kódodnak univerzálisan kell működnie, bármilyen input érték esetén.
Adott 5 input, egy bekezdés és egy gomb. Az
inputokba számokat írunk. A gomb megnyomásakor
írja a beírt számok számtani közepét a bekezdésbe.
