Signatur
Beschreibung
Die Eigenschaft value des Interfaces HTMLOutputElement gibt den aktuellen Wert eines <output>-Elements zurück. Anders als bei <input> gibt es dafür kein HTML-Attribut value. Der Wert ist einfach der Textinhalt des Elements (textContent). Ein leeres Element liefert den leeren String "".
Wenn du value setzt, werden alle Kindknoten des Elements durch einen einzigen Textknoten ersetzt. Beim ersten Setzen merkt sich der Browser außerdem den ursprünglichen Inhalt als Standardwert-Überschreibung. Diesen Wert liefert danach defaultValue. Beim Zurücksetzen des Formulars (form.reset() oder <button type="reset">) bekommt das Element diesen Standardwert wieder zurück.
In der Praxis zeigt man mit <output> Ergebnisse von Berechnungen oder Benutzeraktionen an, zum Beispiel eine Summe, den aktuellen Wert eines Schiebereglers oder einen Preis. Über das Attribut for lässt sich festlegen, aus welchen Feldern das Ergebnis berechnet wird. Das verbessert auch die Barrierefreiheit, denn viele Screenreader lesen <output> als Live-Region vor.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $neuerWert | string | Nur beim Setzen: der neue Wert. Andere Typen (z. B. number) werden automatisch in einen String umgewandelt. Er ersetzt den gesamten Inhalt des Elements als reinen Text, HTML wird also nicht interpretiert. |
Rückgabewert
<output>-Elements, oder "", wenn das Element leer ist.Beispiele
Summe zweier Eingabefelder live anzeigen
// HTML:
// <form id="rechner">
// <input type="number" id="a" value="2"> +
// <input type="number" id="b" value="3"> =
// <output id="ergebnis" for="a b">5</output>
// </form>
const form = document.getElementById('rechner');
const ergebnis = document.getElementById('ergebnis');
form.addEventListener('input', () => {
const a = form.elements.a.valueAsNumber || 0;
const b = form.elements.b.valueAsNumber || 0;
ergebnis.value = a + b; // Zahl wird zu String umgewandelt
console.log(typeof ergebnis.value, ergebnis.value);
});Wert eines Schiebereglers anzeigen
// HTML:
// <input type="range" id="lautstaerke" min="0" max="100" value="50">
// <output id="anzeige" for="lautstaerke">50</output>
const regler = document.getElementById('lautstaerke');
const anzeige = document.getElementById('anzeige');
regler.addEventListener('input', () => {
anzeige.value = `${regler.value} %`;
});value, defaultValue und Formular-Reset
// HTML: <form id="f"><output id="out">Start</output></form>
const form = document.getElementById('f');
const out = document.getElementById('out');
console.log(out.value, out.defaultValue); // Start Start
out.value = 'Berechnet: 42';
console.log(out.value, out.defaultValue); // Berechnet: 42 Start
console.log(out.value === out.textContent); // true
form.reset();
console.log(out.value); // StartHTML wird nicht interpretiert
const out = document.querySelector('output');
out.value = '<strong>fett?</strong>';
console.log(out.children.length); // 0 – nur ein Textknoten
console.log(out.textContent);// Wichtig · Fallstricke
- Der Wert wird nicht mitgesendet: Obwohl
<output>ein Formularelement mitname-Attribut ist, übermittelt der Browser seinen Wert beim Absenden nicht an den Server. Wenn du den Wert brauchst, kopiere ihn in ein<input type="hidden">. - Es gibt kein
value-Attribut: Ein Aufruf wiesetAttribute('value', …)ändert die Anzeige nicht. Den Anfangswert legst du über den Textinhalt im HTML fest. - Kindelemente gehen verloren: Beim Setzen werden alle Kindknoten entfernt, zum Beispiel ein
<span>für die Einheit. Für formatierte Ausgaben solltest du die Kindelemente gezielt bearbeiten.valueist nur für reinen Text gedacht. - Sicher gegen XSS: Der Wert wird als Text eingefügt wie bei
textContent. Nutzereingaben kannst du deshalb gefahrlos zuweisen, anders als beiinnerHTML. - Immer ein String: Auch nach
out.value = 42liefert der Getter"42". Zum Rechnen musst du ihn mitNumber()umwandeln. - Kompatibilität: Wird von allen modernen Browsern unterstützt, nicht aber vom Internet Explorer.