Eojin Han

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>

result는 a와 b가 연산한 결과다. 라는 것을 나타냄.

📌

계산을 직접 한다거나 하는 게 아니라, 여러 요소들의 연산 결과가 담기는 곳이라는 의미. 접근성으로 이해해야 함.

자동연산 예시


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>

form의 oninput에 연산을 명시해서 output을 업데이트 하는 것도 가능.