HTML/Tutorials/Formulare/Ergebnisausgabe
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
value
undoptimum
außerhalb des Anzeigebereiches, so werden sie alsmin
bzw.max
behandelt.
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.