 Umrechner Längenmaß
Werte aus einem Formularfeld zur Weiterbeerchnung übernehmen. Dazu gibt es mehrere Möglichkeiten. Dieses Beispiel identifiziert das Feld aus dem der Wert entnommen werden soll mittels einer ID.
|
|
Werte übergeben mit getElementById
 12.08.2008,Prüfung der Eingabe erweitert
Ein Beispiel für ein Formular, bei dem die Eingabe für eine simple Rechenoperation an eine Funktion übergeben wird. Es nutzt die Möglichkeit der Übernahme der Werte aus dem Eingabefeld mittels 'getElementById'. Der Wert wird dem JavaScript zur Weiterverarbeitung übergeben. Das Ergebnis wird nach der Berechnung, ebenfalls mit 'getElementById', als Wert (value) in ein Formularfeld geschrieben.
Für JavaScript-Beginner: Das Dezimalzeichen in Rechenoperationen soll ein Punkt nicht ein Komma sein! Ansonsten eine simple Sache. Entweder dividieren EingabeWert / 2.54 oder multiplizieren EingabeWert * 2.54 . Ebenso könnten sie nach diesem Verfahren km in Lichtjahre oder Meilen in mm umrechnen. Grundsätzlich also eine simple Rechenoperation mit dem Wert, der einem Eingabefeld des Formulars entnommen wird.
Vor der Rechenoperation muss der eingetragene Wert der Rechenfunktion übergeben werden. Von Vorteil wäre natürlich eine vorherige Überprüfung der Eingabe. Bei den Rechenoperationen kann die Funktion nur mit gültigen numerischen Werten etwas anfangen. Schließlich kann man nur mit gültigen Zahlen und in JavaScript bekannten Konstanten (z.B. Pi) rechnen.
Ich habe das Beispiel hier aufgezeigt, um kurz zu erklären wie man die Werte eines Formularfeldes erfassen und weiterverarbeiten kann. Diese Aufgabe erledigt natürlich ein JavaScript. Zwei unterschiedliche Verfahren stehen zur Verfügung:
Übernahme der Werte, identifiziert durch Namen
Üblich war bisher die Erfassung mit "entnehme im Formular mit dem Namen 'Formular01' den Wert (value) des Formularfeldes mit dem Namen 'Eingabe01' ".
EingabeWert = document.Formular01.Eingabe01.value;
Dazu musste immer über den Namen des Formulars ein Bezug zum Formular hergestellt werden, dann über den Namen des Formularfeldes das Eingabefeld identifiziert werden. Es war also notwendig dem Formular als auch dem Eingabefeld einen Namen zu geben.
JavaScript-Anweisung zum Auslesen des Input-Feldes (in Worten):
in diesem Dokument . im Formular . im Eingabefeld mit dem Namen X . steht was
document . welches Formular . welches Element . der Wert
document.Formularname.Elementname.value
document.Formular01.Eingabe01.value
Übernahme der Werte, identifiziert durch ID (get Element By Id)
In diesem Beispiel wird so verfahren:
Das Eingabefeld des Formulars bekam eine ID (id="Eingabe")
<input type="text" id="Eingabe" size="5" value="0">
Nun muss nicht mehr ein Bezug zum Formular hergestellt werden, sondern man bezieht sich direkt auf des Eingabefeld mit dem eindeutigen Indentifikator.
JavaScript-Anweisung zum Auslesen des Input-Feldes (in Worten):
in diesem Dokument . wo-genau . was
document . im Element mit der ID 'Eingabe' . der Wert
document.getElementById("Eingabe").value
a Entnahme des Eingabewertes (value) und Zuordnung zu der Variablen 'EingabeWert':
Der Wert wird in die Variable 'EingabeWert' geschrieben.
EingabeWert = document.getElementById("Eingabe").value;
b Berechnung:
Der Wert der Variablen 'EingabeWert' wird (z.B.) mit 2.54 multipliziert und das Ergebnis in die Variable 'Ergebnis' geschrieben.
Ergebnis = EingabeWert * 2.54;
c Ausgabe des berechnetes Wertes im Feld mit der ID 'Ausgabe':
Der Wert der Variablen 'Ergebnis' wird in ein Formularfeld geschrieben.
document.getElementById("Ausgabe").value = Ergebnis;
Der Wert der Variablen 'Ergebnis' wird in das Formularfeld mit der ID 'AusgabeI' geschrieben.
document.getElementById("AusgabeI").value = Ergebnis;
Der Wert der Variablen 'Ergebnis' wird in das Formularfeld mit der ID 'AusgabeC' geschrieben.
document.getElementById("AusgabeC").value = Ergebnis;
Die Berechnungen der JavaScript-Funktion werden hier zur Veranschaulichung mit Hilfe eines Formulars dargestellt. Über das Formular können Sie zum Probieren und Verstehen die Ausgangswerte für die Berechnung von Radius und Kreisumfang selbst festlegen und das Ergebnis anzeigen lassen. Wie die Übergabe / Übernahme der Werte im Textfeld eines Formulars zur Berechnung in die JavaScript-Funktion eingebunden wird, erkläre ich auf 2 Beispielseiten (Werteübergabe in Formularen)
 Berechnungswerte aus Formularen entnehmen / in Formulare übertragen 01
Berechnungswerte aus Formularen entnehmen / in Formulare übertragen 02
Werte runden
|
Home • Mathematik • Umrechner Zentimeter Inch Zoll
Quellcode