HTML/Tutorials/Formulare/Ergebnisausgabe
Text-Info
- 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.
Inhaltsverzeichnis
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
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>
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);
<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).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>
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.
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
Dabei gelten folgende Regeln:
- ein fehlendes
min-Attribut wird mit dem Wert 0 initialisiert - ein fehlendes
max-Attribut wird mit dem Wert 1 initialisiert - ein fehlendes
low-Attribut wird mit dem Wert desmin-Attributes initialisiert - ein fehlendes
high-Attribut wird mit dem Wert desmax-Attributes initialisiert
- der Wert des
value-attributs sollte zwischen denen desmin- undmax-Attributes sein - der Wert des
optimum-attributs sollte zwischen denen desmin- undmax-Attributes sein
- liegen die Werte für
valueundoptimumaußerhalb des Anzeigebereiches, so werden sie alsminbzw.maxbehandelt.
Siehe auch
- Berechnung des Body-Mass-Index nach Eingabe von Größe und Masse
- Fortschrittsanzeige mit CSS-Animation
Referenz
- Referenz: output
input-Event ausgelesen und imoutput-Element wieder ausgegeben.