문서 초기화 이벤트 함수 init
만약 input과 span 태그가 script코드보다 밑에 있다면 오류가 발생한다.
그 이유는, input,span태그가 로드돼야 id값이 생기는데,
id값이 생기기도전에 함수가 실행돼버리기 때문이다.
오류를 피하기 위해선 이벤트를 init()이라는 함수에 넣고 window.onload를 사용해 window가 모두 로드된 후에 이벤트를 담고있는 init()이 호출되도록 해야한다.
<body>
<script>
function printResult(){
var x = prompt("x값을 입력하세요.",0);
var y = prompt("y값을 입력하세요.",0);
x = parseInt(x);
y = parseInt(y);
btnPrint.value = x+y;
span1.innerText = x+y;
}
function init(){
btnPrint.onclick = printResult;
span1.onclick = printResult;
}
window.onload = init;
</script>
<input type="button" value="클릭" id="btnPrint"/> <br/>
<span id = "span1">스팬입니다.</span>
</body>window는 제일 먼저 실행되는 최상위 객체이므로 window.onload
즉, window가 모두 로드됐을때 init 함수가 호출돼서 오류가 나지 않는다.
객체 아이디 명명 방법의 문제
HTML과 CSS에서는 id값을 지정할 때 btnPrint(낙타표기법)을 쓰지않고 btn-print 처럼 대시를 이용한 명명규칙이 존재한다.
이때, 이런 불편한점을 해결하기위한 방법으로 document를 이용한다.
Document객체는 값을 담는 큰~보따리라고 생각하면 된다.
<body>
<script>
function printResult(){
var btnPrint = document.getElementById("btn-print"); //btn-print라는 이름의 엘리먼트를 줘!
var x = prompt("x값을 입력하세요.",0);
var y = prompt("y값을 입력하세요.",0);
x = parseInt(x);
y = parseInt(y);
btnPrint.value = x+y;
}
function init(){
var btnPrint = document.getElementById("btn-print"); //btn-print라는 이름의 엘리먼트를 줘!
btnPrint.onclick = printResult;
}
window.onload = init;
</script>
<input type="button" value="클릭" id="btn-print"/> <br/>
<span id = "span1">스팬입니다.</span>
</body>btnPrint에 document.getElementById("btn-print")로 값을 받은 후 btnPrint를 사용하면 된다.
