HTML/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: Identifizierung eines anderen Elements (input-Element), welches sich auf eins oder mehrere Elemente beziehen kann. Hier sollte ein Name als Wert eingegeben werden.
• 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 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) des output-Elements nicht dar.

ansehen …

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 <output hidden="hidden"></output> und das hidden-Attribut per JavaScript entfernen.

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