<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>counter</title>
</head>
<body>
<div id="counter">0</div>
<button id="increase">+</button>
<button id="decrease">-</button>
<script>
const $counter = document.getElementById('counter-x');
const $increase = document.getElementById('increase');
const $decrease = document.getElementById('decrease');
let num = 0;
const render = function () {
$counter.innerHTML = num;
};
$increase.onclick = function () {
num ++;
console.log('increase 버튼 클릭', num);
render();
};
$decrease.onclick = function () {
num --;
console.log('decrease 버튼 클릭', num);
render();
};
</script>
</body>
</html>이러한 단순한 숫자가 더해지거나 빼지는 코드가 있다 이 코드를 돌리면 +버튼이나 -버튼을 누르면 에러가 발생하는데 이제 이 에러를 분석하자.
개발자도구의 console을 열어보면
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
at render (java.html:19:32)
at $increase.onclick (java.html:25:13)
보면 에러가 발생하기는 했으나 html파일에 포함된 자바스크립트가 일부 실행된것은 확인했다.
에러 정보에보면 오른쪽에 에러발생위치를 나타내는 링크를 클릭해보면 자바스크립트 코드를 디버깅할수있는 source패널로 이동한다.
java.html:19
에러가 발생한 위치는
const render = function () {
$counter.innerHTML = num;
};
그리고 에러에 보면 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')라는 에러 정보가 표시되는데 이때 $counter변수의 값이 null인지 확인해보고 null이면 그 이유를 알아내서 에러가 발생한 원인을 제거해보자.
발생한 코드의 라인번호 클릭 후 다시 -버튼을 눌러보면 디버깅 모드로 들어가는데 이때 $counter에 커서를 두면 이것의 변수가 나오는데 이 값은 null 이였다.
원인은
const $counter = document.getElementById('counter-x');이 부분에서 $counter의 변수에 값을 할당할때 html요소의 아이디를 counter-x라고 잘못 지정한것이다.
이 부분을 counter로 다시 수정하면 제대로 동작한다.