굉장히 예리한 질문입니다. setTimeout("timeout(clock)", 1000); 에서 clock은 바로 <div id="clock"></div> 객체를 가리킵니다. 더 정확하게 코딩하면 setTimeout("timeout(document.getElementById('clock'))", 1000); 로 해야하는데 명확히는 모르지만 앞의 방법처럼 해도 div 객체를 찾아냅니다.
정답을 명확하고 쉽게 하려면 clock 변수를 전역 변수로 선언하고 다음과 같이 하는 것이 좋겠습니다. <!DOCTYPE html> <html><head><title>setTimeout()/clearTimeout()</title> <style> div { display : inline-block; width : 7em; border : 1px solid gray; background-color : aliceblue;
} </style> </head> <body onload="startClock()"> <h3>div 태그에 시계 만들기</h3> <hr> <div id="clock"></div> <script> var clock = document.getElementById("clock"); function startClock() { timeout(clock); }
function timeout(obj) { var current = new Date(); obj.innerHTML = current.toLocaleTimeString() setTimeout("timeout(clock)", 1000); // 1초 후 timeout() 호출 } </script> </body> </html>
setTimeout("timeout(clock)", 1000); 에서 clock은 바로 <div id="clock"></div> 객체를 가리킵니다.
더 정확하게 코딩하면 setTimeout("timeout(document.getElementById('clock'))", 1000); 로 해야하는데
명확히는 모르지만 앞의 방법처럼 해도 div 객체를 찾아냅니다.
정답을 명확하고 쉽게 하려면 clock 변수를 전역 변수로 선언하고 다음과 같이 하는 것이 좋겠습니다.
<!DOCTYPE html>
<html><head><title>setTimeout()/clearTimeout()</title>
<style>
div {
display : inline-block;
width : 7em;
border : 1px solid gray;
background-color : aliceblue;
}
</style>
</head>
<body onload="startClock()">
<h3>div 태그에 시계 만들기</h3>
<hr>
<div id="clock"></div>
<script>
var clock = document.getElementById("clock");
function startClock() {
timeout(clock);
}
function timeout(obj) {
var current = new Date();
obj.innerHTML = current.toLocaleTimeString()
setTimeout("timeout(clock)", 1000); // 1초 후 timeout() 호출
}
</script>
</body>
</html>
다음에는 5번 정답을 이렇게 고쳐놓아야 겠습니다.