TypeError: Cannot read properties of null (reading ‘addEventListener’)

에러 원인

• script를 body의 상단에 작성하게 되면, 간혹 html이 로드 되기 전에 script를 먼저 불러와버리는 경우가 생긴다.
• addEventListener을 부여할 DOM을 찾지 못하게 되어 에러가 발생

해결 방법

1. script는 body태그의 가장 아래에 작성

2. window.onload = function(){} 을 사용한다.

window.onload = function(){} 함수는 웹브라우저의 모든 구성요소에 대한 로드가 끝났을 때 브라우저에 의해서 호출되는 함수로, 해당 부분에 넣으면 HTML을 모두 로드한 뒤에 함수를 호출한다. head태그 내부에 script 영역을 참조하는 부분이 있지만, window.onload 함수 내부에 문제가 되는 함수를 넣어줌으로써 해결할 수 있다.

window.onload = function () {
  var hw = document.getElementById("hw");
  hw.addEventListener("click", function () {
    alert("Hello world");
  });
};

3. defer

Script 태그
DOM이 생성될 때, Script 태그를 만나면 DOM 생성을 멈추고 Script를 실행한다.
src 속성을 포함한 외부 스크립트를 만났을 때에도 마찬가지이다. 해당 스크립트를 다운 받고 실행할 때 까지 Script 태그 아래에 선언된 DOM 요소들은 대기해야 한다.

여기서 DOM 생성을 중단하지 않고, 스크립트를 동시에 내려받게 할 수 있는 방법으로 defer, async가 있다.

출처

https://velog.io/@ahn-sujin/Uncaught-TypeError-Cannot-read-property-addEventListener-of-null

https://gobae.tistory.com/110#DOM%–%EC%–%-D%EC%–%B-%–%EC%A-%–%EB%-B%A-%EC%-D%B-%–%EC%-D%BC%EC%–%B-%EB%–%-C%EB%-B%A-%EB%A-%B-%–%EC%–%B-%EB%–%A-%–%EB%AC%B-%EC%A-%-C%EA%B-%–%–%EB%B-%-C%EC%–%-D%ED%–%–%EB%-A%–%EA%B-%—