output

설명
연관요소들과 연산한 결과다 라는 것을 표시하는 용도 (접근성)
Primary
content category
interactive
flow

output

<form id="example-form"> <input type="range" id="b" name="b" value="50" /> + <input type="number" id="a" name="a" value="10" /> = <output name="result" for="a b">60</output> </form>
resultab가 연산한 결과다. 라는 것을 나타냄.
📌
계산을 직접 한다거나 하는 게 아니라, 여러 요소들의 연산 결과가 담기는 곳이라는 의미. 접근성으로 이해해야 함.

자동연산 예시

const form = document.getElementById("example-form"); const a = form.elements["a"]; const b = form.elements["b"]; const result = form.elements["result"]; function updateResult() { const aValue = parseInt(a.value); const bValue = parseInt(b.value); // update output tag value result.value = aValue + bValue; } form.addEventListener("input", updateResult); updateResult();
이벤트 리스너를 통해 입력값이 바뀌면 연산이 새로 되게끔 했음.
그리고 연산 결과를 output.value로 설정함.
output이 연산 자체를 직접 하거나 하는 것이 아님.
 
<form oninput="result.value=parseInt(a.value) + parseInt(b.value)"> <input type="number" id="a" value="0"> + <input type="number" id="b" value="0"> = <output name="result" for="a b">0</output> </form>
formoninput에 연산을 명시해서 output을 업데이트 하는 것도 가능.