Error Uncaught TypeError: Cannot read properties of null (reading 'addEventL…
페이지 정보
본문
제목과 같은 에러의 원인은 "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('클릭해주셔서 감사합니다!'); });
개발자에게 후원하기
추천, 구독, 홍보 꼭~ 부탁드립니다.
여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~
감사합니다~
추천0 비추천0
- 이전글Visual Studio Code에서 한글이 깨지는 경우 조치 방법. (HTML, Javascript) 21.12.26
- 다음글Failed to load resource: net::ERR_FILE_NOT_FOUND 21.12.26
댓글목록
등록된 댓글이 없습니다.