목차
- <output> 객체 정의 - 계산 결과값 출력
- <output> 객체 구문
- <output> 객체 예제 - 접근
- <output> 객체 예제 - 생성
- <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> 객체는 표준 속성/메서드/이벤트 지원.
