Programmeren in JavaScript/Gegevens invoegen (kader)

Je kunt in javascript met een prompt tekst invoeren, maar je kent ook vast wel tekstvakjes in veel websites die je met HTML op een pagina kan zetten. de HTML code daarvoor is:

<input type="text" name="tekstvak" id="tekstvak" value="Hallo">

Hier heb je niets aan, want het enige wat je nu hebt is een tekstvakje met "Hallo" erin. Als je hier javascript gebruikt kun je er veel leuke dingen mee doen, bijvoorbeld de tekst laten veranderen.

<script language="javascript">
<!--
function verander(){
	//tekstvak.value = "iets"; // Dit wordt niet vaak gebruikt, later komt nog waarom.
	document.getElementById("tekstvak").value = "Ik kan een tekstvak laten veranderen!";
}
//-->
</script>
<input type="text" name="tekstvak" id="tekstvak" value="Hallo" onchange="verander();">

Dit script maakt ook al gebruik van een "functie". je zou wat er tussen de accolades staan ({ en } ) ook bij onchange="" kunnen zetten, maar als je het zo doet is het wat overzichterlijker. In de functie wordt de inhoud van het element met de ID "tekstvak" (het tekstvak dus) veranderd. De eerste die er staat (tekstvak.value = "iets";) werkt wel in Internet Explorer, maar niet in Firefox, en het is de bedoeling om het script in alle browsers te laten werken, dus gebruiken we de tweedde. Als je dit script gebruikt kun je ervoor zorgen dat er maar één mogelijk is om in het tekst vak in te vulllen.

Je kunt een tekstvak ook gebruiken als invoer.

<script language="javascript">
<!--
function verander(){
	inhoud = document.getElementById("tekstvak").value;
	document.write("Je typte"+inhoud);
}
//-->
</script>
<input type="text" name="tekstvak" id="tekstvak" value="Hallo"><input type="button" value="Klik hier!" onclick="verander();">

Dit script gebruikt weer een variabele. Als je op de HTML-knop klikt komt er op je pagina te staan wat je hebt getypt.