HTMLOutputElement: defaultValue ããããã£
Baseline
åºãå©ç¨å¯è½
ãã®æ©è½ã¯åºãå®è£ ããã¦ãããå¤ãã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã©ã¦ã¶ã¼ã§åä½ãã¾ãã2016å¹´8æä»¥éããã¹ã¦ã®ãã©ã¦ã¶ã¼ã§å©ç¨å¯è½ã§ãã
defaultValue 㯠HTMLOutputElement ã¤ã³ã¿ã¼ãã§ã¤ã¹ã®ããããã£ã§ããã® <output> è¦ç´ ã®ããã©ã«ãå¤ã表ãã¾ãããã®å¤ã®åå¾ããã³è¨å®ã¯ã<output> ã«ããã textContent ã®åå¾ããã³è¨å®ã¨åçã§ãã
å¤
æååã§ãã
ä¾
ä¸è¨ã®ä¾ã§ã¯ãdefaultValue 㯠HTML ã«å½åè¨è¿°ããã¦ããå¤ãè¿ãã¾ããvalue ã¸ã®å¤æ´ã¯ãDOM å
ã® defaultValue ããã® textContent ã«ã¯å½±é¿ãã¾ããã
html
<fieldset>
<legend>2 ã¤ã®æ°å¤ã®å ç®</legend>
<p>
<input type="number" id="operand1" value="5" aria-label="First number" />
+
<input type="number" id="operand2" value="7" aria-label="Second number" />
=
<output
id="result"
for="operand1 operand2"
aria-live="polite"
aria-controls="output"
>12</output
>
</p>
</fieldset>
<pre id="logs" aria-live="polite"></pre>
js
const logs = document.getElementById("logs");
const operand1 = document.getElementById("operand1");
const operand2 = document.getElementById("operand2");
const result = document.getElementById("result");
function updateResult() {
result.value = operand1.valueAsNumber + operand2.valueAsNumber;
logs.innerText = `result.defaultValue: ${result.defaultValue}\nresult.value: ${result.value}`;
}
operand1.addEventListener("input", updateResult);
operand2.addEventListener("input", updateResult);
updateResult();
仿§æ¸
| 仿§æ¸ |
|---|
| HTML > # dom-output-defaultvalue-dev > |