Benutzer:JürgenB/Eingaben clientseitig mit JavaScript auswerten
- 30min
- leicht
- Grundkenntnisse in
- HTML
- CSS
- JavaScript
Überarbeitung von Formulare/Eingaben_clientseitig_mit_JavaScript_auswerten
Formulare dienen zur Erfassung von Benutzereingaben. Die Daten können an einen Server gesendet oder direkt im Browser verarbeitet werden.
Dieses Tutorial zeigt, wie man eingegebene Werte auslesen und im Browser weiterverarbeiten kann.
Mithilfe des EVA-Prinzips wollen wir …
- ein Formular mit JavaScript ansprechen
- Eingaben auslesen
- diese clientseitig, d.h. auf dem Computer des Nutzers, verarbeiten
- und diese Berechnung anschließend wieder ausgeben.
Inhaltsverzeichnis
Eingaben mit JavaScript auslesen
Jedes JavaScript-Objekt hinter einem Eingabe-Element kennt die value-Eigenschaft. Sie enthält den aktuellen Wert. Beschreibt man sie mit einem anderen Wert, hat man den eingegebenen Inhalt verändert.
// neues <input> erzeugen
let myInput = document.createElement("input");
// Wert hineinschreiben (durch simple Wertzuweisung)
myInput.value = "Hallo Welt!";
// Wert auslesen und in der Konsole ausgeben
console.log(myInput.value); // Hallo Welt!
value-Eigenschaft. Ebenso kann man mit der value-Eigenschaft nicht prüfen, ob bei einer Checkbox das Häkchen gesetzt ist, oder nicht. Dafür benötigt man die checked-Eigenschaft.Wie kommt man an das Element heran?
Um den eingegebenen Inhalt eines Elements auszuwerten, muss man das Element mit JavaScript "irgendwie anfassen" können, also eine Referenz darauf erhalten. Entweder man selektiert ein Element über die Struktur des DOM, oder man spricht es über die Liste an Elementen des übergeordneten Formulars an.
document.forms
Das Objekt document.forms gibt einer HTMLCollection aller form-Elemente eines Dokument zurück. Mit dem Unterobjekt elements haben Sie Zugriff auf Elemente eines Formulars.
let form = document.forms[0]
gibt das erste (die Zählung beginnt bei 0) Formular eines Dokuments zurück. Bei der Erweiterung des HTML-Dokuments um weitere Formulare ist diese Methode jedoch fehleranfällig.
Sicherer ist das Ansprechen über den Namen des Formulars:
let form = document.forms.theform
let form = document.forms['theform']
Der untere Fall ist übersichtlicher, da hier der Name klar als Variable gekennzeichnet wird.
let form = document.forms['theform'].elements.['breite']
Information: Ansprechen über IDs
let breite = theForm.breite.value;Das Ansprechen von Elementen über ihre id ist zwar möglich, aber nicht zu empfehlen. Es ist ein „Microsoftismus“ und ein Relikt der Browserkriege, der es in die Spec geschafft hat[1] und nicht totzukriegen ist. Aber die Spec selbst warnt davor, weil das zu "zerbrechlichem Code" führt.
Die einzelnen Eingabe- und Bedienelemente können nun über die elements-Eigenschaften angesprochen werden. Sie liefern HTMLCollections, auf denen diese Zugriffe definiert sind und die keine Kollisionen verursachen. Durch die Verwendung von document.forms schließen Sie aus, irrtümlich mit einer globalen oder lokalen Variablen zu kollidieren.
→ JavaScript/DOM/Document/forms
DOM-Methoden
Prinzipiell können Eingabe-Elemente auch außerhalb von Formularen in einem Dokument vorkommen, jedoch können ihre Inhalte dann nicht mit den üblichen Mitteln vom Browser selbst an den Server versandt werden, was ja der Sinn hinter Formularen ist. Es gibt Fälle, wie beim Auslösen clientseitiger Aktionen, in denen man das auch nicht benötigt. Man kann in solchen Fällen dann nur über das DOM auf die Eingabe-Elemente zugreifen.
let input = document.getElementById['myinput'];
Ergebnisausgabe
- 12min
- leicht
In ganz alten JavaScripten wurden Berechnungen in input-Elemente geschrieben. In HTML5 wurden zwei neue Elemente eingeführt: output ist für die Ausgabe von Berechnungen gedacht - während das meter-Element eine visuelle Anzeige ermöglicht.
output
Das output-Element ist das Gegenstück des input-Elements und dient zur Ausgabe des Ergebnisses einer Benutzereingabe oder einer Berechnung der Applikation.
Folgende Attribute sind möglich:
-
for: IDs von einem oder mehrereninput-Elementen, auf welche sich die Berechnung bezieht (leerzeichen-getrennte Liste von IDs) -
name: dient wie beim input-Element für eine einmalige Namensbesetzung
Beispiel: Ausgabe der Werte eines Schiebereglers
<h2>Ergebnisausgabe eines Schiebereglers</h2>
<label>Lautstärke: <input type="range" id="volume" value="50"></label>
<output id="output" for="volume"></output>
Der Wert des Schiebereglers wird mit dem input-Event ausgelesen und im output-Element wieder ausgegeben.
let volumeSlider = document.getElementById('volume');
function setzeVolumeAnzeige(wert) {
document.getElementById('output').value = wert;
}
volumeSlider.addEventListener('input', function(event) {
setzeVolumeAnzeige(event.target.value);
});
setzeVolumeAnzeige(volumeSlider.value);
Das <output>-Element bekommt im HTML keinen vorbelegten Inhalt. Dadurch würde der Wert "50" unnötig gedoppelt, und falls . Statt dessen wird das <output>-Element im JavaScript initialisiert.
hidden-Attribut aus und entfernen das Attribut im JavaScript. Das Frickl zeigt den zweiten Ansatz (wobei er dort wenig nützt, ohne JavaScript funktioniert das ganze Frickl nicht).meter
Das meter-Element visualisiert einen Wert einer Größe in Abhängigkeit einer Skala in bis zu drei (Ampel-)Farben, beispielsweise die Anzahl der Kommentare zu einer Frage. Mit -meter wird auch ein Messgerät bezeichnet, bekannt sind vor allem Volt- oder Amperemeter.
Sie erhalten einen Anzeigebereich, der in bis zu 3 Intervalle geteilt werden kann.
-
min-low -
low-high -
high-max
Zusätzlich kann ein optimaler Wert (optimum) bestimmt werden. Befindet sich der Wert (value) im Intervall des optimalen Wertes, so wird die Skala grün dargestellt, befindet er sich in einem Nachbarintervall, ist die Skale gelb, anderenfalls erfolgt die Darstellung in roter Farbe.
meter-Elementes schreiben.
Das meter-Element erwartet folgende Attribute:
-
value, aktueller Wert -
min, untere Grenze der Skala -
max, obere Grenze der Skala -
low, obere Grenze des "Niedrig"-Bereichs der Skala -
high, untere Grenze des "Hoch"-Bereichs der Skala -
optimum, optimaler Wert der Skala
Anwendungsbeispiel: Währungsumrechner
Das Beispiel verwendet kein umgebendes Formular, da hier keine Daten versendet, sondern live im Browser berechnet und angezeigt werden sollen. Es werden die aktuellen Werte der input-Elemente mittels ihrer value-Eigenschaft ausgelesen und verändert.
<label>
Wechselkurs Euro → Dollar
<input name="rate" type="number" step="0.01" value="1.11" />
</label>
<label>
Betrag in Euro
<input name="a" type="number" step="0.01" />
</label>
<label>
Betrag in US-Dollar
<input name="b" type="number" step="0.01" />
</label>
Damit mehrere Umrechner auf einer Seite möglich sind, wird ein generischer Name für die Eingabefelder verwendet. Da es sich um Zahlenwerte handelt, sind sie vom Typ number.
var r = parseFloat(rate.value);
if (r !== 0) {
switch (event.target) {
case a:
case rate:
b.value = (parseFloat(a.value) * r).toFixed(2);
break;
case b:
a.value = (parseFloat(b.value) / r).toFixed(2);
break;
}
}
Da das Dividieren durch null nicht möglich ist, prüft das if-Statement, ob überhaupt ein von null abweichender Wechselkurs eingegeben ist, damit bei den Berechnungen eine Division durch null vermieden wird, welche zu einem Abbruch der Programmausführung führen würde.
Wenn der Inhalt eines Eingabe-Elements geändert wurde, löst das ein Ereignis vom Typ change aus. Der hier dargestellte Code prüft nun, von welchem Eingabefeld dieses Ereignis ausgegangen ist, um daraufhin die entsprechenden anderen Felder zu aktualisieren.
Wird das erste Feld mit dem Wechselkurs verändert (case rate) oder wird der Ausgangswert verändert (case a), wird der Wert des Ergebnisfeldes neu berechnet. Bei Änderung des Ergebniswertes (case b) wird der Ausgangswert angepasst.
Anwendungsbeispiel: BMI-Rechner
Im folgenden Beispiel wird ein BMI-Rechner erstellt. BMI steht für Body-Mass-Index, und der BMI wird berechnet, indem das Gewicht einer Person durch das Quadrat ihrer Größe in Meter geteilt wird.
Da die Verarbeitung der Eingaben ausschließlich im Browser erfolgt und keine Werte zum Server geschickt werden, wird im html auf das form-Element verzichtet. Der Zugriff auf die Ein- und Ausgabelemente erfolgt über querySelector.
Eingabe
Zur Berechnung des BMI werden die Größe und das Gewicht der Person benötigt. Dieses könnte mit einem <input type="number"> erfolgen. Hier verwenden wir aber den self-slider, ein Custom-Element, bei dem die Eingabe über einen Slider oder ein Eingabefeld erfolgen können. Über Attribute erhält der self-slider ein Label sowie die entsprechenden Werte für min, max und value.
Das Html des BMI-Rechners ist recht einfach gehalten und besteht aus zwei Eingabeelementen für Gewicht und Größe sowie den Ausgabeelementen. Die Elemente enthalten die benötigten Attribute.
Ausgabe
Die Ausgabe erfolgt in einem output-Element sowie über das meter-Element.
Ohne das optimum-Attribut kennt das meter-Element drei Wertebereiche: kleiner low, zwischen low und high und größer high. In diesen Bereichen wird der Anzeigebalken gelb - grün - gelb eingefärbt. In unserem Beispiel werden aber fünf Bereiche benötigt: Magersüchtig, Untergewichtig, Normalgewichtig, Übergewichtig und Fettleibig. Diese sollen rot - gelb - grün - gelb - rot eingefärbt werden. Dieses ist nur mit Javascript möglich. Nach Berechnen des BMI wird dem meter-Element bei Magersüchtig oder Fettleibig dafür die Klasse "extreme" gegeben.
Das CSS
Das CSS ist deutlich aufwändiger und besteht überwiegend aus den browserspezifischen Regeln für das meter-Element. Das meter-Element erhält außer den Regeln für die Randwerte nur eine Angabe zur Breite.
Das Javascript
Für das self-slider Customelement wird ein umfangreiches Javascript benötigt, das in einen eigenen Scriptbereich gelegt wurde.
Das Script für die Berechnung des BMI liegt in einem weiteren Scriptbereich und wird über das DOMContendLoaded-Event gestartet.
Die Browserabfrage erfolgt durch Auswerten von navigator.vendor und navigator.userAgent.
Für die Berechnung des BMI erhält der body einen zentralen Eventhandler für das input-Event, in dem durch Eventdelegtion bei jeder Änderung von Gewicht oder Größe die Werte ausgelesen, verarbeitet und ausgegeben werden. Je nach Wert bekommt das meter-Element die Klasse "extrem". Für die Ausgabe im output-Element wird der BMI-Wert noch mit toLocaleString auf eine bzw. zwei Nachkommastellen gerundet in das Zahlenformat der eingestellten Sprache gebracht.
toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 });
Gestaltung des meter-Elements
Leider ist die Modifizierung des meter-Elements per css Stand 7/2026 noch nicht in allen Browsern gleich. Im Chrome, Safari und Edge erfolgt der Zugriff auf den Anzeigebalken über
::-webkit-meter-suboptimum-value
im Firefox über
::-moz-meter-bar
Zusätzlich muss im Safari und im Firefox das meter-Element noch auf
appearance: none;
gestellt werden. Dieses hat aber zur Folge, dass das Element dann nicht mehr wie die UI-Elemente des Browsers aussieht. Es muss also per zusätzlichem css wieder so gestaltet werden, dass es sein altes Aussehen behält. Auch im Chrome/Edge müssen noch kleine Anpassungen vorgenommen werden. Da dieses css browserspezifisch sein muss, wird per Javascript der Browser ermittelt, und dem body eine der Klassen .chrome, .edge, .safari, .firefox gegeben. Bei anderen Browsern bleiben die äußeren Bereiche gelb.
Der Zugriff erfolgt über die Pseudoelemente
Safari/Chrome/Edge: Balken über
::-webkit-meter-bar
Safari/Chrome/Edge: Anzeigebereich über
::-webkit-meter-suboptimum-value
Firefox: Balken über das meter-Element
Firefox: Anzeigebereich über
::-moz-meter-bar
Sonst wird das Aussehen des meter-Elements nicht verändert. Die Anpassungen für die Klasse .extreme sind empirisch ermittelt und passen nur zum Defaultstyle des Elements.
Und so sieht es aus
Anwendungsbeispiel: Ausgabe eines Stundenzettels
<form id="myForm">
<legend>Rechnung</legend>
<label for="stunden">Arbeitsstunden</label>
<input type="number" min="0" id="stunden" value="0" step=".25">
<label for="satz">Stundensatz (€)</label>
<input type="number" min="8,5" id="satz" value="48.50" step="0.50">
<label for="mwst">MwSt (%)</label>
<input type="number" min="0" id="mwst" value="19">
<p><span>Gesamt:</span> <output id="betrag" for="stunden satz mwst">0</output> €</p>
</form>
In drei Eingabefeldern werden Werte für die Anzahl der geleisteten Stunden, des Stundensatzes und der Mehrwertsteuer abgefragt. Um Fehleingaben zu vermeiden, wird das Eingabefeld mit type=number auf die Eingabe von Zahlen beschränkt.
Der berechnete Wert wird in einem output-Element ausgegeben.
document.getElementById("myForm").addEventListener("input", rechne);
function rechne() {
var stunden = document.getElementById('stunden'),
satz = document.getElementById('satz'),
mwst = document.getElementById('mwst');
var summe = stunden.valueAsNumber * satz.valueAsNumber * (1 + mwst.valueAsNumber/100);
summe = summe.toFixed(2);
document.getElementById('betrag').value = summe;
}
In diesem Beispiel wird der Eventhandler mit addEventListener dynamisch angehängt. Wenn etwas ins Formular eingegeben wird, feuert das input-Event und ruft die Funktion rechne() auf.
In dieser Funktion werden die Werte abgerufen und berechnet. Anschließend wird die summe mit toFixed(2) kaufmännisch auf zwei Stellen gerundet.
Siehe auch
Siehe auch
Weblinks
- ↑ Whatwg: HTML Living Standard §7.3.3
