[JavaScript] Uncaught TypeError: Cannot read property 'addEventListener' of null

JavaScript

by spring92 2021. 5. 24. 00:01

<head>
	<script src="index.js"></script>
</head>
<body>
	<input type="text" id="inputBox"/>
</body>

index.js
const inputBox = document.getElementById("inputBox");
inputBox.addEventListener("keypress", (e) => {
  console.log(e);
  }
});

위와 같은 코드를 작성하자 "Uncaught TypeError: Cannot read property 'addEventListener' of null" 에러가 발생했다.

직역하자면, null의 프로퍼티인 'addEventListner'를 읽을 수 없음?이 될 거 같다.

나는 변수 inputBox의 프로퍼티인 'addEventListener'를 사용하도록 코드를 작성했는데 왜 null의 프로퍼티라고 할까?

왜냐하면 변수 inputBox에 null이 담겼고, null에게는 'addEventListener'라는 프로퍼티가 없기 때문이다.

그렇다면 변수 inputBox에는 왜 null이 담겼을까?

원인은 HTML이 완전히 로드되기 전에 스크립트가 HTML을 참조했기 때문이다.

즉, HTML의 로딩이 끝나지 않아서 inputBox라는 id를 가진 요소가 만들어지지도 않았는데, 자바스크립트가 먼저 로드되어서 변수 inputBox에 '없는 요소'를 담으려고 했기 때문에 비어있는 값 "null"이 담긴 것이다.

실제로 콘솔에 inputBox를 찍어보면 null이 나온다.

이것을 해결하려면

<body>
	<input type="text" id="inputBox"/>
    	<script src="index.js"></script>
</body>

HTML 로딩이 끝난 뒤에 스크립트가 로딩되도록 스크립트 태그를 바디 태그의 밑에 작성하는 방법이 있고,

<head>
	<script src="index.js" defer></script>
</head>
<body>
	<input type="text" id="inputBox"/>
</body>

script 태그에 defer나 async를 추가하는 방법이 있다.

[JavaScript] 객체 비구조화(구조 분해) (0)	2021.08.16
[JavaScript] 함수의 매개변수에 들어올 기본값 설정하기 (0)	2021.08.15
[JavaScript] script 태그의 위치와 async, defer (0)	2021.05.27
[JavaScript] input enter로 이벤트 발생 keycode deprecated (0)	2021.05.20
[JavaScript] Spread Operator 펼침연산자 (0)	2021.05.01