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.

In diesem Artikel

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;
}

js
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();

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

HTML DOM API
HTMLOutputElement
Konstruktor
1. HTMLOutputElement()
Instanzeigenschaften
Instanzmethoden
Vererbung
Verwandte Seiten für HTML DOM
Anleitungen
1. Verwenden von Microtasks in JavaScript mit queueMicrotask()
2. Im Detail: Microtasks und die JavaScript-Laufzeitumgebung

HTMLOutputElement: HTMLOutputElement() Konstruktor

In diesem Artikel

Syntax

Parameter

Rückgabewert

Ausnahmen

Beispiele

Programmgesteuertes Erstellen eines output-Elements

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN