Tekstiväljadega töötamine JavaScriptis

Praegu õpime saama teksti meie saidi kasutajatelt. Selleks on HTML-is ette nähtud spetsiaalne silt input, mis esindab endast andmete sisestamiseks mõeldud tekstivälja.

<input>

Sellel silbil on spetsiaalne atribuut value, mis määrab algse teksti, mis on kirjutatud inputi lehele sisenemisel:

<input value="text">

Meie saidi kasutaja saab peale lehele sisenemist muuta inputi teksti. Sel juhul, kui meil on muutuja, mis sisaldab viidet sellele inputile, siis omadus value selles muutujas sisaldab alati inputi teksti praegust väärtust.

Proovime seda praktiliselt. Olgu meil input atribuudiga value:

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

Saame viida sellele inputile muutujasse:

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

Ja nüüd kuvame ekraanile inputi praeguse teksti:

console.log(elem.value);

Ja nüüd muudame inputi teksti teiseks:

elem.value = 'new text';

Antud on input ja nupp. Vajutades nuppu kirjutage inputi mingi tekst.

Antud on input, lõik ja nupp. Vajutades nuppu kirjutage lõiku tekst inputist.

Antud on kaks inputit ja nupp. Esimesse inputi sisestab kasutaja arvu. Vajutades nuppu kirjutage teise inputi sisse sisestatud arvu ruut.

Antud on kaks inputit ja nupp. Vajutades nuppu kirjutage esimesse inputi teise inputi väärtus, ja teise inputi - esimese inputi väärtus. Teie kood peab töötama universaalselt, iga inputi väärtuste puhul.

Antud on 5 inputit, lõik ja nupp. Inputitesse sisestatakse arve. Vajutades nuppu kirjutage sisestatud arvude aritmeetiline keskmine lõiku.