HTML/Formulare/Ergebnisausgabe
Aus SELFHTML-Wiki
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
Inhaltsverzeichnis
Anwendungsbeispiele[Bearbeiten]
Ausgabe der Werte eines Schiebereglers[Bearbeiten]
Beispiel
ansehen …
<h2>Ergebnisausgabe eines Schiebereglers</h2>
<label for="volume">Lautstärke:</label>
<input type="range" id="volume" value="50">
<output id="output" for="volume">50</output>
Der Wert des Schiebereglers wird mit dem input-Event ausgelesen und im output-Element wieder ausgegeben.
function ausgeben(ev) {
document.getElementById('output').value = ev.target.value;
}
document.getElementById('volume').addEventListener('input', ausgeben);
Beachten Sie: Dieses Beispiel funktioniert im Internetexplorer nicht:
- Der IE verwendet das
input
-Event nicht korrekt und - stellt den Wert (
value
) desoutput
-Elements nicht dar.
Beachten Sie: Ohne die Verfügbarkeit von JavaScript ist die Berechnung des im output-Element ausgegebenen Werts nicht möglich. Deshalb ist es überlegens- und empfehlenswert, das output-Element erst vor der Ausgabe des Werts mit createElement dynamisch zu erzeugen und das input-Event mittels AddEventListener anzubinden.
Einfacher als das wäre wohl
Einfacher als das wäre wohl
<output hidden="hidden"></output>
und das hidden-Attribut per JavaScript entfernen.Ausgabe eines Stundenzettels[Bearbeiten]
Beispiel
ansehen …
<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.
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.
Beachten Sie: Dieses Beispiel funktioniert im Internetexplorer nicht:
- Der IE 8 und älter unterstützt das
input
-Event nicht, - der IE 11 und älter stellt den Wert (
value
) desoutput
-Elements nicht dar und - der IE 11 und älter unterstützt
valueAsNumber
nicht.
Siehe auch[Bearbeiten]
- Berechnung des Body-Mass-Index nach Eingabe von Größe und Masse
- Fortschrittsanzeige mit CSS-Animation
Referenz[Bearbeiten]
- Referenz: output