HTMLOutputElement : constructeur HTMLOutputElement()

Disponibilit limite

Cette fonctionnalit n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utiliss.

En savoir plus
Voir la compatibilit complte

Exprimental: Il s'agit d'une technologie exprimentale.
Vrifiez attentivement le tableau de compatibilit des navigateurs avant de l'utiliser en production.

Le constructeur HTMLOutputElement() cre un nouvel objet HTMLOutputElement.

Note : Actuellement, seul Safari implmente ce constructeur, il est donc recommand d'utiliser Document.createElement() pour une compatibilit plus large voir l'exemple ci-dessous.

Syntaxe

new HTMLOutputElement()

Exceptions

TypeError: Leve avec le message "Illegal constructor" dans les navigateurs qui ne prennent pas en charge ce constructeur.

Note : En pratique, vous creriez gnralement des lments HTML <output> en utilisant Document.createElement() au lieu de ce constructeur, car createElement() est pris en charge par tous les navigateurs.

Cet exemple cre un lment <output> en utilisant le constructeur HTMLOutputElement() et l'insre dans un formulaire qui additionne deux nombres.

html

<form id="my-form">
  <label>
    Premier nombre
    <input type="number" id="a" value="5" />
  </label>
  +
  <label>
    Deuxime nombre
    <input type="number" id="b" value="3" />
  </label>
  =
  <span id="output-container"></span>
</form>
<p id="warning" hidden>
   Votre navigateur ne prend pas en charge le constructeur
  <code>HTMLOutputElement()</code>.
</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();