Bar: 1 version importeret

2022-10-21T12:36:36Z

1 version importeret

← Ældre version	Versionen fra 21. okt. 2022, 14:36
(Ingen forskel)

htx_>Bar: /* Ulemper ved input text-felt som output */

2012-02-22T09:13:55Z

Ulemper ved input text-felt som output

Ny side

==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.

<pre>
<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>
</pre>

Filen med koden kan hentes i en [[media:js_input.zip|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}}
[[Kategori:Javascript_output]]

Text-felt til output - Versionshistorie

Bar: 1 version importeret

htx_>Bar: /* Ulemper ved input text-felt som output */