[Error] Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') 해결방법

와.

 

아침 7시, 스벅에서 '자 이제 진도좀 빼 볼까?!' 하며 출근 전 '취미코딩'을 하려고 노트북을 켰다.

그리고 진도에 맞춰 JS를 구현하는 단계를 시작했다.

 

하지만.

 

개발자는 문제해결자라고 했는가.

JS를 구현하지 못하고 결국 문제해결만 하다가 끝났다.

 

'난 아직 개린이어서 문제해결말고 진도를 빼고 싶다고!

아닌가? 여기서 문제 해결을 하는게 옳은건가?

이것도 개린이 단계에서 마주하는 문제 중 하나인건가?

이게 맞는건가?

맞는건가?!!!'

 

라는 갈등과 갈등이 머리속을 지배하며 문제해결에 최선을 다 했으나.. 결국 해결하지 못하고 출근을 하게 된다.ㅠ

 

---

 

어떤 문제가 발생했느냐?

 

코드

 

 

문제

 

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

 

 

왜 자꾸 addEventListner를 못 읽는 것이냐.

 

접근방법

1. addEventListner 철자확인

철자 다 맞다. 

 

2. addBtn의 문제인지 확인

window.addEventListner로 바꿔서 실행하니 잘 된다.

그렇다면 addBtn의 문제가 아닐까.

 

3. 변수 addBtn의 문제를 확인

chrome console에서 debugging을 해보았다.

(실은 어떻게 보는지 잘 모른다. 그냥 추론추론해보다보니 왠지 html -> Js로 못 넘어온 것 같다는 결론을 내렸을 뿐..)

querySelector에서 .footer__button 클래스의 DOM을 못 읽어온거 같다.

왜지..?!!!!

 

4. HTML 문서 확인

이상없다.

 

5. 혹시.. 나의 VS CODE 에 문제가 생긴걸까?

다른 파일을 만들어서 구현해봤지만 결과는 똑같다.ㅠ

 

6. 문제해결을 위해 GPT에게 물어봤다.

하지만 이 친구는 내가 원하는 답을 주지 않는다.

 

7. 회사를 가야하므로 접는다.

대체 뭐가 문제일까.. 회사 컴퓨터로 한번 다시 해봐야겠다고 생각했지만 일이 많아서 못했다.

 

8. 점심시간이다. 밥을 먹으며 해결해보자.

밥을 먹으며 다시 문제를 해결한다. 이게 해결되어야 진도를 뺄 수 있다.ㅠ

결국 구글에 검색했다.

그랬더니 바로!!! 해결방안이 나왔다.

 

해결방법

 

이유는 바로, script에 'defer'옵션을 주지 않아서 였다. (왜냐면 script link를 head에 넣어놨기 때문)

그러다보니, js를 실행할 때, 읽어올 DOM을 찾지 못했던 것이다...!!! 헝.ㅠ

머리로만 이해하던 defer의 중요성을 이렇게 몸소 느끼게 되니 가슴으로 확 내려온다. 이해완료..!!!

 

개린이(..?)입장에선 엄청나게 큰 발견이므로 적어놓는다.

우왕 나도 문제 해결했어!