HTMLOutputElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLOutputElement extends HTMLElement

Beschreibung

HTMLOutputElement ist die DOM-Schnittstelle des <output>-Elements. Das Element zeigt das Ergebnis einer Berechnung oder Benutzeraktion an, z. B. eine Summe aus mehreren Eingabefeldern oder den aktuellen Wert eines Schiebereglers. Es erbt alle Eigenschaften und Methoden von HTMLElement und ergänzt formularbezogene Funktionen.

Die wichtigsten Eigenschaften sind:

value – der aktuelle Textinhalt (entspricht textContent); das Schreiben setzt den Inhalt.
defaultValue – der Wert, der beim Zurücksetzen des Formulars (form.reset()) wiederhergestellt wird.
htmlFor – eine DOMTokenList mit den IDs der Elemente aus dem for-Attribut, die zum Ergebnis beitragen.
form, name, type (immer "output"), labels – Formularzugehörigkeit und Beschriftungen.
validity, validationMessage, willValidate (immer false) sowie die Methoden checkValidity(), reportValidity() und setCustomValidity().

Viele Browser behandeln <output> implizit als ARIA-Live-Region (role="status"), sodass Screenreader Änderungen ansagen. Damit eignet sich das Element besser für dynamische Ergebnisse als ein einfaches <span>.

Rückgabewert

Typ

HTMLOutputElement

Beschreibung

Instanzen erhält man z. B. über document.querySelector('output'), form.elements oder document.createElement('output').

Beispiele

Element erzeugen und Wert setzen

const out = document.createElement('output');
out.name = 'ergebnis';
out.value = '42';
document.body.append(out);

console.log(out instanceof HTMLOutputElement);
console.log(out.type, out.value, out.textContent);

true output 42 42

Live-Summe aus zwei Eingabefeldern

// HTML:
// <form id="calc">
//   <input type="number" id="a" value="2"> +
//   <input type="number" id="b" value="3"> =
//   <output name="summe" for="a b">5</output>
// </form>
const form = document.querySelector('#calc');
const summe = form.elements.namedItem('summe');

form.addEventListener('input', () => {
  const a = form.elements.a.valueAsNumber || 0;
  const b = form.elements.b.valueAsNumber || 0;
  summe.value = String(a + b);
});

console.log([...summe.htmlFor]);

["a", "b"]

defaultValue und Formular-Reset

// HTML: <form id="f"><input type="range" id="r" value="50"><output id="o" for="r">50</output></form>
const form = document.querySelector('#f');
const range = document.querySelector('#r');
const out = document.querySelector('#o');

range.addEventListener('input', () => { out.value = range.value; });

range.value = '80';
out.value = '80';
console.log(out.value, out.defaultValue);

form.reset();
console.log(out.value);

80 50 50

Formularzugehörigkeit prüfen

const out = document.querySelector('output');
console.log(out.form?.id ?? 'kein Formular');
console.log(out.willValidate); // output nimmt nie an der Validierung teil
console.log(out.checkValidity());

calc false true

// Wichtig · Fallstricke

Wird nicht übermittelt: Obwohl <output> ein name haben kann, wird sein Wert beim Absenden des Formulars nicht mitgesendet und taucht auch nicht in FormData auf. Für übertragene Werte ein <input type="hidden"> verwenden.
defaultValue-Falle: Solange defaultValue nicht explizit gesetzt wurde, spiegelt es den Textinhalt. Das erste Schreiben von value friert den bisherigen Inhalt als Standardwert ein.
Das Setzen von value ersetzt alle Kindknoten durch reinen Text – es wird kein HTML interpretiert, daher sicher gegenüber XSS (anders als innerHTML).
htmlFor ist eine DOMTokenList, kein String; Zuweisung eines Strings setzt das for-Attribut.
Die implizite Live-Region-Ansage ist nicht in allen Screenreader-/Browser-Kombinationen zuverlässig; ggf. aria-live="polite" ergänzen.
Kompatibilität: in allen aktuellen Browsern unterstützt; der Internet Explorer kennt das Element nicht.

Siehe auch

HTMLOptGroupElement HTMLInputElement HTMLButtonElement HTMLOListElement HTMLObjectElement