Esmalt on meil vaja vahendit, et veebilehele saaks midagi sisestada. Selleks on HTML-is olemas kood <input type="sisestatavate väärtuste tüüp, näiteks text teksti puhul või number numbrite puhul" id="viide" />
<div> ... </div> märgendeid kasutame selleks, et määrata lehel erinevate elementide asukoht.
Lehekülje tegemiseks ava arvutis programm Notepad ning võid siit kopeerida ning sinna kleepida alloleva koodi.
<!DOCTYPE html>NB! Salvestamisel vali failitüübiks "All files" ning anna failile nimeks nimi.html
<html>
<head>
<title>Nimeküsimine</title>
<script>
</script>
</head>
<body>
<h1>Nimi</h1>
<div>
Kirjuta siia oma eesnimi:
<input type="text" id="eesnimi" />
<input type="button" value="OK" />
</div>
<div id="vastus">
Vastuse koht.
</div>
</body>
</html>
Edasi tuleb programmile teada anda, et me tahaksime "Vastuse kohale" kirjutada tervituse.
Lisa oma Notepadi programmi <script> ... </script> vahele järgmised read:
function tervita(){ document.getElementById("vastus").innerHTML="Tere"; }Nüüd on vaja kusagil see funktsioon ka nö välja kutsuda. Selleks lisage <input type="button" value="OK" /> sisse onclick="tervita();"
<input type="button" value="OK" onclick="tervita();" />Salvesta oma programm ning ava see veebilehitsejaga. Sisesta oma nimi ning klõpsa nupul OK.
Hetkel kuvab programm ainult tervituse.
Kui soovime sellele lisada veel ka nime, mille kasutaja sisestas, siis tuleb funktsiooni tervita() täiendada ning lisada sellele "eesnimi" välja väärtus (value).
document.getElementById("eesnimi").valueFunktsioon tervita() võiks nüüd välja näha selline:
document.getElementById("vastus").innerHTML= "Tere, "+document.getElementById("eesnimi").value;
Ülesanne
* Loo ekraanile kaks tekstivälja: üks eesnime, teine perekonnanime jaoks. Tervita kasutajat mõlemat nime pidi.
* Muuda oma valmis programmi nii, et nime asemel saaksid sisestada näiteks pikkuse sentimeetrites ning see arvutatakse ümber meetriteks.
