HTMLOutputElement.type — Eigenschaft · JavaScript-Referenz

Signatur

get HTMLOutputElement.type

Beschreibung

Die Eigenschaft HTMLOutputElement.type ist schreibgeschützt und liefert für jedes <output>-Element immer denselben Wert: die Zeichenkette "output". Ein HTML-Attribut type gibt es für <output> nicht. Die Eigenschaft ist nur deshalb vorhanden, damit alle formularbezogenen Elemente eine einheitliche Schnittstelle haben.

Nützlich ist sie vor allem, wenn man generischen Code schreibt, der über form.elements läuft und jedes Steuerelement anhand seiner type-Eigenschaft einordnet. Auch HTMLInputElement, HTMLSelectElement ("select-one"/"select-multiple"), HTMLTextAreaElement ("textarea"), HTMLButtonElement und HTMLFieldSetElement ("fieldset") haben eine solche Eigenschaft. So erkennt man Ausgabefelder, ohne tagName oder instanceof prüfen zu müssen.

Wichtig: <output>-Elemente werden beim Absenden eines Formulars nicht mit übertragen und tauchen auch in FormData nicht auf. Wer Formulardaten von Hand zusammenstellt, kann mit el.type === "output" gezielt Ausgabefelder überspringen.

Rückgabewert

Typ

string

Beschreibung

Immer die Zeichenkette "output".

Beispiele

Typ eines output-Elements auslesen

// HTML: <output id="ergebnis" for="a b">0</output>
const ausgabe = document.getElementById("ergebnis");
console.log(ausgabe.type);

// Schreibversuche werden ignoriert (im Strict Mode: TypeError)
try {
  "use strict";
  ausgabe.type = "text";
} catch (e) {
  console.log(e.name);
}
console.log(ausgabe.type);

output TypeError output

Formularelemente nach Typ einordnen

// HTML:
// <form id="rechner">
//   <input name="a" type="number" value="2">
//   <input name="b" type="number" value="3">
//   <select name="op"><option>+</option></select>
//   <output name="summe">5</output>
// </form>
const form = document.getElementById("rechner");

const typen = [...form.elements].map((el) => `${el.name}: ${el.type}`);
console.log(typen.join("\n"));

a: number b: number op: select-one summe: output

Ausgabefelder beim manuellen Serialisieren überspringen

const form = document.querySelector("form#rechner");

const daten = Object.fromEntries(
  [...form.elements]
    .filter((el) => el.name && el.type !== "output")
    .map((el) => [el.name, el.value])
);

console.log(daten);

{ a: "2", b: "3", op: "+" }

Alle Ausgaben eines Formulars live aktualisieren

const form = document.getElementById("rechner");

form.addEventListener("input", () => {
  const a = form.elements.a.valueAsNumber || 0;
  const b = form.elements.b.valueAsNumber || 0;
  for (const el of form.elements) {
    if (el.type === "output") {
      el.value = String(a + b);
    }
  }
});

// Wichtig · Fallstricke

Schreibgeschützt: Außerhalb des Strict Mode werden Zuweisungen an type stillschweigend ignoriert, im Strict Mode (also auch in ES-Modulen) werfen sie einen TypeError, weil es nur einen Getter gibt.
Es gibt kein HTML-Attribut type für <output>. setAttribute("type", …) setzt zwar ein Attribut, ändert aber nichts am Rückgabewert der Eigenschaft.
<output>-Werte werden nicht mit dem Formular abgeschickt und fehlen in FormData. Wer das Ergebnis an den Server schicken will, braucht zusätzlich ein <input type="hidden">.
Kompatibilität: wird von allen aktuellen Browsern unterstützt (Chrome, Edge, Firefox, Safari). Der alte Internet Explorer kennt <output> nicht; dort liefert die Eigenschaft undefined.

Siehe auch

HTMLButtonElement.type HTMLOutputElement.name HTMLOutputElement.form HTMLOutputElement.value HTMLOutputElement.labels