JAVASCRIPT- 코드 초기화와 엘리먼트 객체선택하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="main.js"></script>
<script>
function printResult(){
var x= prompt("x값을 입력하세요.",0);
var y= prompt("y값을 입력하세요.",0);
x=parseInt(x);
y=parseInt(y);
btnPrint.value=x+y;
}
function init(){
btnPrint.onclick = printResult;
}
window.onload = init;
</script>
</head>
<body>
<input type="button" value = "클릭" id="btnPrint"/><br/>
<span id = "span1">스팬입니다.</span>
</body>
</html>
windows.onload = init; ->윈도우가 로드가 완료가되었을때 실행하라는뜻이다. 위와같이하면 잘 출력된다.
- 또다른 문제점 ! 객체아이디 명명방법의 문제 ->스크립트에서는 낙타표기법을 쓰지않는다. btn-print 이런식으로 표기해야한다.
표기법을 고침
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="main.js"></script>
<script>
function printResult(){
var btnPrint = document.getElementById("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")
btnPrint.onclick = printResult;
}
window.onload = init;
</script>
</head>
<body>
<input type="button" value = "클릭" id="btn-print"/><br/>
<span id = "span1">스팬입니다.</span>
</body>
</html>
댓글남기기