에러가 난 코드
<!DOCTYPE html>
<html>
<head>
<title>setinterval</title>
<style>
div {
background: yellowgreen;
width: 200px;
}
</style>
<script>
let state = true;
function init() {
var div = document.getElementById("div");
div.addEventListener("click", click);
var Clock = setInterval("get_time()", 1000);//<<에서 Clock을 var로 선언하여 전역변수화 시켰으나
}
function click() {
state = !state;
if (state == true) {
Clock = setInterval("get_time()", 1000);
div.style.color = "black";
} else {
div.style.color = "gray";
clearInterval(Clock); //<<전역변수인 Clock을 읽어오지 못함
}
}
function get_time() {
let date = new Date();
let text = date.toLocaleString();
div.innerHTML = text;
}
</script>
</head>
<body onload="init()">
<h3>div 태그에 시계 만들기</h3>
<hr>
<div id="div"> </div>
</body>
</html>
-----
1.전역변수로 선언한 변수를 다른 함수에서 읽어오지 못하는 점에 관한 의문
작동이 되는 코드
<script>
let state = true;
let Clock = null;
function init() {
var div = document.getElementById("div");
click();
div.addEventListener("click", click);
}
function click() {
if (state == true) {
Clock = setInterval("get_time()", 1000);
div.style.color = "black";
} else {
div.style.color = "gray";
clearInterval(Clock);
}
state = !state;
}
function get_time() {
let date = new Date();
let text = date.toLocaleString();
div.innerHTML = text;
}
</script>
var div = document.getElementById("div");
에서 만든 div 변수는 init() 함수 외에서는 접근하지 못합니다. 아래와 같이 전역변수로 선언해야 합니다.
var div;
function init() {
div = document.getElementById("div");
..
}
div 외에 여러 함수에 사용해야만 하는 변수들을 이렇게 선언해보세요.