제목과 같은 에러의 원인은 "addEventListener" 속성을 읽을 수 없기 때문에 발생합니다. HTML이 모두 로드 되기 전에 자바스크립트 영역에서 HTML을 참조하기 때문인데요. 그렇기 때문에 HTML이 모두 로드된 후 자바스크립트에서 해당 개체에 접근하도록 코드를 수정하면 됩니다. 일반적으로 아래와 같이 body 아래에 배치 해줍니다.

<script src='./javascript.js'></script>
<button id='myButton'>Welcome!</button>

위 코드를 아래와 같이 변경 해줍니다.

<button id='myButton'>Welcome!</button>
<script src='./javascript.js'></script>

대부분 이와같이 사용하고 있지만, 아래와 같이 window.onload 이벤트에 함수를 넣어서 사용해도 됩니다. HTML을 다시 아래와 같이 수정하세요.

<script src='./javascript.js'></script>
<button id='myButton'>Welcome!</button>

자바스크립트는 아래와 같이 window.onload 이벤트 안에 넣어줍니다.

window.onload = function() {
    let myButton = document.getElementById("myButton");
    myButton.addEventListener('click', () => { alert('클릭해주셔서 감사합니다!'); });
}

// 기존 코드
// let myButton = document.getElementById("myButton");
// myButton.addEventListener('click', () => { alert('클릭해주셔서 감사합니다!'); });

개발자에게 후원하기

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~