Published 2022. 9. 27. 20:27
728x90
반응형
Uncaught TypeError: Cannot read property 'addEventListener' of null
에러 원인
HTML이 모두 로드 되기 전 script를 먼저 불러오는 경우 발생
HTML이 로드 되기 전 Javascript 영역에서 HTML을 참조하기 때문
👉 addEventListener을 부여할 DOM을 찾지 못해서 에러 발생
해결 방법
1. script 태그를 body 태그 하단에 작성
body 태그 하단에 js를 작성하면 html이 먼저 로드되고, js가 그 다음 로드되기 때문에 오류가 발생하지 않음
<!DOCTYPE html>
<html>
<head>
// 스크립트가 이곳에 작성되었다면 body 태그 하단으로 이동
<head>
<body>
<h1>스크립트 오류</h1>
<script src="sample.js"></script>
</body>
<html>
2. window.onload = function(){} 사용
💡 window.onload()란?
자바스크립트에서 페이지가 로드되면 자동으로 실행되는 전역 콜백 함수
페이지의 모든 요소들이 로드된 이후 호출
한 페이지에서 하나의 window.onload() 함수만 적용됨
해당 방식은 window.onload()를 오버라이딩(재정의)해주어 돔트리 완성 후 실행됨
수정 전 - id 값 null
<!DOCTYPE html>
<html>
<head>
<script>
let x = document.getElementById('home');
x.addEventListener('click', function(){
alert('Hello world');
});
</script>
<head>
<body>
<p id="home">hello world</p>
</body>
<html>
수정 후
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function(){
let x = document.getElementById('home');
x.addEventListener('click', function(){
alert('Hello world');
});
}
</script>
<head>
<body>
<p id="home">hello world</p>
</body>
<html>
참고 자료 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=quki09&logNo=220710183742,
반응형
'프로그래밍 > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 뒤로가기 시 이벤트 (0) | 2022.11.21 |
|---|---|
| [JavaScript] 배열 특정 값 찾기 (0) | 2022.11.15 |
| [Toast UI] Toast UI datepicker 사용법(CDN) (0) | 2022.07.22 |
| [JavaScript] a 태그 링크 막는 방법 e.preventDefault() (0) | 2022.03.31 |
| Uncaught TypeError: $(...). is not a function 오류 (0) | 2021.12.17 |