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

에러 원인

 

 

hmtl 로드 되기 전에 자바스크립트 영역에서 html 을 참조하기 떄문

addEventLister 에서 html 태그를 참조할 수 없기 떄문에 null 값이 반환되었고, 

해당 부분을 고쳐줘야 하는 것

 

 

---

해결 방법

- script defer 이용

브라우저의 경우, defer 스크립트를 만나게 되면, 스크립트를 다운로드 하긴 하지만, 문서 파싱을 멈추지 않고 아래로 끝까지 읽어들이는데,

스크립트 태그의 경우  html 태그의 끝 태그에서 실행하게 된다

보통, DOM 을 조직하여 HTML 의존성이 있는 경우에 먼저 HTML 을 파싱하고서, 실행되어야 할 자바스크립트가 있는 경우에 사용하도록 한다.

 

 

이전 코드

 

 

이후 코드