Tekstikenttien käsittely JavaScriptissä
Nyt opimme saamaan käyttäjiltä
tekstiä sivustoltamme. Tätä varten
HTML:ssä on erityinen input-tagi,
joka edustaa tekstikenttää tietojen syöttämiseen.
<input>
Tällä tagilla on erityinen value-attribuutti,
joka asettaa alkuperäisen tekstin, joka näkyy
input-kentässä sivulle saapumisen yhteydessä:
<input value="text">
Sivustomme käyttäjä voi sivulle saapumisen jälkeen
muuttaa input-kentän tekstiä.
Samalla, jos meillä on muuttuja, joka sisältää
viittauksen tähän input-kenttään, niin value-ominaisuus
tässä muuttujassa sisältää aina input-kentän nykyisen
tekstiarvon.
Kokeillaan käytännössä. Olkoon meillä input-kenttä
value-attribuutilla:
<input id="elem" value="text">
Saadaan viittaus tähän input-kenttään muuttujaan:
let elem = document.querySelector('#elem');
Ja nyt tulostetaan input-kentän nykyinen teksti näytölle:
console.log(elem.value);
Ja nyt vaihdetaan input-kentän teksti toiseen:
elem.value = 'new text';
Annettu input-kenttä ja painike. Painikkeen painalluksella kirjoita input-kenttään jotain tekstiä.
Annettu input-kenttä, kappale ja painike. Painikkeen painalluksella kirjoita kappaleeseen input-kentän teksti.
Annettu kaksi input-kenttää ja painike. Ensimmäiseen input-kenttään käyttäjä syöttää numeron. Painikkeen painalluksella kirjoita toiseen input-kenttään syötetyn numeron neliö.
Annettu kaksi input-kenttää ja painike. Painikkeen painalluksella kirjoita ensimmäiseen input-kenttään toisen input-kentän arvo, ja toiseen input-kenttään - ensimmäisen input-kentän arvo. Koodisi tulee toimia yleisesti, millä tahansa input-kenttien arvoilla.
Annettu 5 input-kenttää, kappale ja painike.
Input-kenttiin syötetään numeroita. Painikkeen painalluksella
kirjoita syötettyjen numeroiden keskiarvo kappaleeseen.
