<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>setTimeout()/clearTimeout()</title>
<style>
div {
display : inline-block;
width : 7em;
border : 1px solid gray;
background-color : aliceblue;
}
</style>
<script>
function startClock() {
var clock = document.getElementById("clock");
timeout(clock);
}
function timeout(obj) {
var current = new Date();
obj.innerHTML = current.toLocaleTimeString()
setTimeout("timeout(clock)", 1000); // 1초 후 timeout() 호출 //timeout()함수안에 매개변수인 clock이 무엇인가요? startClock()함수안에있는 지역변수인건가요?
그렇다면 지역변수인 clock을 startClock()함수외부에서 어떻게 사용이 가능한것인가요?
}
</script>
</head>
<body onload="startClock()">
<h3>div 태그에 시계 만들기</h3>
<hr>
<div id="clock"></div>
</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번 정답을 이렇게 고쳐놓아야 겠습니다.