[HTML_Objects] JS - <output> 객체 - 계산결과값출력 (= 산출태그 = output태그 = 아웃풋태그) (HTML5추가, IE지원X)

1. <output> 객체 정의 - 계산 결과값 출력
2. <output> 객체 구문
3. <output> 객체 예제 - 접근
4. <output> 객체 예제 - 생성
5. <output> 객체 속성

<output> 객체 정의 - 계산 결과값 출력

 

HTML <output> 태그(요소) 의미.

(현재, IE/Edge 브라우저는 지원 X)

 

<output> 객체 구문

 

[접근]

var x = document.getElementById("요소ID");

또는,

var x = document.getElementById("폼요소ID").elements

 

[생성]

var x = document.createElement("OUTPUT");

 

<output> 객체 예제 - 접근

 

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

  <input type="range" id="a" value="50">100

  +<input type="number" id="b" value="50">

  =<output id="hz" name="x" for="a b"></output>

</form>

<button type="button" onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

function homzzang() {

  var x = document.getElementById("hz").name;

  document.getElementById("demo").innerHTML = x;

}

</script> 

 

결과보기 

<output> 객체 예제 - 생성

 

<form id="hz" oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

  <input type="range" id="a" value="50">100

  +<input type="number" id="b" value="50">=

</form>

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

function homzzang() {

  var x = document.createElement("OUTPUT");

  x.setAttribute("name", "x");

  x.setAttribute("for", "a b");

  document.getElementById("hz").appendChild(x);

  document.getElementById("demo").innerHTML = "생성완료";

}

</script> 

 

결과보기 

<output> 객체 속성

 

defaultValue

<output> 요소의 기본값 설정/반환.

 

form

<output> 요소를 포함하는 양식에 대한 참조 반환.

 

htmlFor

<output> 요소의 for 속성값 반환.

 

labels

<output> 요소와 연관된 <label> 요소 목록 반환.

 

name

<output> 요소의 name 속성값 설정/반환.

 

type

Output 객체가 나타내는 HTML 요소의 유형 반환.

 

value

<output> 요소의 값 설정/반환. 

 

※ <output> 객체는 표준 속성/메서드/이벤트 지원.