HTML/Tutorials/Formulare/Ergebnisausgabe

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 mehreren input-Elementen, auf welche sich die Berechnung bezieht (leerzeichen-getrennte Liste von IDs)
• name: dient wie beim input-Element für eine einmalige Namensbesetzung

Anwendungsbeispiele

Ausgabe der Werte eines Schiebereglers

Beispiel ansehen …

<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.

ansehen …

Beachten Sie: Ohne die Verfügbarkeit von JavaScript ist die Berechnung des im output-Element ausgegebenen Werts nicht möglich. Solange das output-Element nicht visuell markiert wird (Hintergründe, Ränder, vorbelegter Wert), ist das ohne Bedeutung. Wenn Sie aber auf "ausprobieren" klicken, finden Sie im Frickl ein output-Element, dem durch die ::after-Pseudoklasse ein Prozentzeichen hinzugefügt wird und das visuell deutlich hervorgehoben wird. Wie man mit inaktivem JavaScript umgeht, wird im Artikel zum Progressive Enhancement angesprochen. Beispielsweise könnten Sie das output-Element im HTML weglassen und erst per JavaScript in das Dokument einsetzen. Oder Sie liefern es mit dem 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).

Beachten Sie: Dieses Beispiel entspricht der HTML Spezifikation, aber funktioniert im Internet Explorer nicht:

• Der Internet Explorer sendet das input-Event nur für <input> Elementtypen text und password, aber nicht für range.
• Der Internet Explorer kennt das output Element nicht und damit auch nicht die Eigenschaft value, so dass eine Zuweisung an value nichts auslöst.
• Für eine Kompatibilität mit dem Internet Explorer können Sie das change Event verwenden. Es wird bei den meisten Browsern für jede Änderung am Schieberegler gesendet. Und statt an die value Eigenschaft des <output> Elements können Sie an die Eigenschaft textContent zuweisen (was Auswirkungen auf das Verhalten der defaultValue Eigenschaft hat, die bei angestrebter IE-Kompatibilität aber ohnehin nutzlos ist).

Ausgabe eines Stundenzettels

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.

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) des output-Elements nicht dar und
• der IE 11 und älter unterstützt valueAsNumber nicht.

ansehen …

Siehe auch

• Berechnung des Body-Mass-Index nach Eingabe von Größe und Masse
• Fortschrittsanzeige mit CSS-Animation

Referenz

• Referenz: output