Text-felt til output

Fra Kommunikation-IT Holstebro HTX
Skift til: navigering, søgning

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.