HTMLOutputElement: HTMLOutputElement() コンストラクター
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
HTMLOutputElement() コンストラクターは、新しい HTMLOutputElement オブジェクトを生成します。
メモ:
現在、このコンストラクターを実装しているのは Safari のみであるため、より幅広い互換性を確保するには、Document.createElement() を使用することをお勧めします。詳細は、下記の例を参照してください。
構文
js
new HTMLOutputElement()
引数
なし。
返値
新しい HTMLOutputElement オブジェクト。
例外
TypeError-
このコンストラクターに対応していないブラウザーでは、
"Illegal constructor"というメッセージと共に発生します。
例
プログラムで output 要素を生成
メモ:
実際に <output> 要素を作成するには、このコンストラクターの代わりに Document.createElement() を使用するのが一般的です。これは、createElement() がすべてのブラウザーで対応しているためです。
この例では、<output> 要素を HTMLOutputElement() コンストラクターを用いて作成し、2 つの数値を足し合わせるフォームに挿入します。
html
<form id="my-form">
<label>
数値 1
<input type="number" id="a" value="5" />
</label>
+
<label>
数値 2
<input type="number" id="b" value="3" />
</label>
=
<span id="output-container"></span>
</form>
<p id="warning" hidden>
⚠️ このブラウザーは
<code>HTMLOutputElement()</code> コンストラクターに対応していません。
</p>
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();
仕様書
| 仕様書 |
|---|
| HTML # htmloutputelement |