HTMLOutputElement: HTMLOutputElement() Konstruktor

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Der HTMLOutputElement() Konstruktor erstellt ein neues HTMLOutputElement Objekt.

Hinweis: Derzeit implementiert nur Safari diesen Konstruktor, daher wird die Verwendung von Document.createElement() für eine breitere Kompatibilität empfohlen — siehe das Beispiel unten.

Syntax

new HTMLOutputElement()

Ausnahmen

TypeError: Wird mit der Nachricht "Illegal constructor" in Browsern ausgelöst, die diesen Konstruktor nicht unterstützen.

Hinweis: In der Praxis würden Sie normalerweise <output>-Elemente mit Document.createElement() erstellen, anstatt diesen Konstruktor zu verwenden, da createElement() in allen Browsern unterstützt wird.

Dieses Beispiel erstellt ein <output>-Element mit dem HTMLOutputElement() Konstruktor und fügt es in ein Formular ein, das zwei Zahlen addiert.

html

<form id="my-form">
  <label>
    Number one
    <input type="number" id="a" value="5" />
  </label>
  +
  <label>
    Number two
    <input type="number" id="b" value="3" />
  </label>
  =
  <span id="output-container"></span>
</form>
<p id="warning" hidden>
  ⚠️ Your browser does not support the
  <code>HTMLOutputElement()</code> constructor.
</p>

body {
  font-family: system-ui;
}

input {
  width: 3rem;
  font-size: inherit;
}

p {
  padding: 0.25rem;
  background-color: #fff2cc;
}

try {
  new HTMLOutputElement();
} catch {
  document.getElementById("warning").hidden = false;
}

const output = new HTMLOutputElement();
output.id = "result";
output.setAttribute("for", "a b");
document.getElementById("output-container").appendChild(output);

function updateResult() {
  const a = document.getElementById("a");
  const b = document.getElementById("b");
  output.value = a.valueAsNumber + b.valueAsNumber;
}

document.getElementById("my-form").addEventListener("input", updateResult);
updateResult();