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.

html<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:

html<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:

html<input id="elem" value="text">

Kapjunk hivatkozást erre az inputra egy változóba:

javascriptlet elem = document.querySelector('#elem');

És most írjuk ki a képernyőre az input aktuális szövegét:

javascriptconsole.log(elem.value);

És most változtassuk meg az input szövegét egy másikra:

javascriptelem.value = 'new text';