Text-felt til output
Hvordan anvendes et input text-felt til output
For at kunne skrive noget ud til et input text-felt, så skal man først have adgang til det rigtige text-felt.
Det gør man ved at sætte et ID på input-feltet, som man så kan få fat i med document.getElementById(), og så kan man rette på egenskaben value.
Input text-feltet (i HTML-koden) kan se ud som følger:
<input type="text" id="udfelt" readonly="yes" />
Her angiver <input type="text" at det er et text-felt.
id="udfelt" navngiver netop dette text-felt til at hedde udfelt - dette navn skal være unikt i koden, ellers bliver browseren forvirret.
readonly="yes" gør at brugeren ikke kan rette i indholdet af text-feltet, andet end ved at aktivere koden (altså ikke ved at skrive i det). Dette er ikke nødvendigt for funktionen af at skrive noget ud, men gør programmerne mere brugervenlige.
For at udskrive noget fra javaScript, så kan man gøre følgende:
document.getElementById("udfelt").value = "Nyt indhold";
Her er det document.getElementById() der får fat i det rigtige text-felt.
"udfelt" angiver præcist hvilket felt det er der skal skrives i.
.value er den egenskab der rettes på, altså indholdet i text-feltet.
"Nyt indhold" er det der skal stå i text-feltet efter at koden er udført.
Input text-felt med visning af en variabel
Der er ikke nogen forskel på det der skal stå i HTML-koden, og for at udskrive noget fra javaScript, så kan man gøre følgende:
tal = 42;
document.getElementById("udfelt").value = "Værdien er " + tal + " uden enheder";
Her er det document.getElementById() der får fat i det rigtige text-felt.
"udfelt" angiver præcist hvilket felt det er der skal skrives i.
.value er den egenskab der rettes på, altså indholdet i text-feltet.
"Værdien er " er den første del af det der skal stå i text-feltet, herefter tages indholdet af variablen tal, for til sidst at tilføje " uden enheder", så efter at koden er udført står der i text-feltet "Værdien er 42 uden enheder".
Eksempel på anvendelse af input text-felt
Koden viser først lidt forklaring, og et input fra et text-felt, hvor man kan skrive et tal ind, og tallet bliver så behandlet og skrevet ud i et andet text-felt.
<html>
<head>
<title>input</title>
<script type="text/javascript" language="JavaScript">
// Funktin der fanger en indtastning
function fordoble () {
tal = document.getElementById("talInd").value;
tal = tal * 2;
// Placerer beskeden nede i formularen
document.getElementById("tekstUd").value = tal;
}
</script>
</head>
<body>
<h1>input-bokse</h1>
<p>input har mange funktioner - her som tekstfelt og knap.<br />Tekstfeltet har flere funktioner, både til input og output.</p>
Indtast et tal : <input type="text" id="talInd"><br />
Tryk på knappen <input type="button" value="Knappen" onClick="fordoble();"><br />
Her er resultatet af beregningen : <input type="text" id="tekstUd" size="30" readonly="yes"><br />
</body>
</html>
Filen med koden kan hentes i en Zip-fil
Fordele ved input text-felt som output
Fordelen ved at anvende et input text-felt som output er at det er enkelt at anvende, og det man skriver ud bliver i sidens visning efter koden fortsætter.
Ulemper ved input text-felt som output
Ulempen ved at anvende et input text-felt som output kan være at det virker lidt forvirrende, at et output kommer i noget der normalt anvendes til input.
| Webcode | |
|---|---|
| JavaScript | for - while - do while - for in - løkke - løkker i løkker - if - if-else - else-if - Conditional - Switch - break - continue - Funktion - Return - Returværdi - Rekursion - Sekvens - Javascript strukturer |
| js Input | Checkbox - Dropdown - Form - Input button - Input filter - Input password - Input text - Textarea - submit knap - Option - Prompt - Confirm - Radio button - Select - Input-Tag - Keyboard event |
| js Output | Alert - Document.write - Frameset output - Objekt egenskaber - Objekt output - Text-felt til output - Vindue output - Billed egenskaber - Canvas |
| js Syntaks | Arrays - Betingelse - Identifyer - Variabel - Variabel scope - Type - Sekvens |
| js Objekt | Canvas - Billed egenskaber - Egne objekter - Events - HTML-objekter - Keyboard event - Event-handler - Browser detektering - Preload images - Document Object Model |
| Tid i JavaScript | Date objektet - setTimeout - setInterval |
| PHP | Header - Include |