반응형
Error
Uncaught TypeError: Cannot read properties of null
페이지가 로드되기 전에 해당 요소를 호출 할 때 발생하는 에러
Uncaught TypeError: Cannot set properties of null
페이지가 로드되기 전에 해당 요소의 값을 설정할 때 발생하는 에러
해결 방법
- 해결 방법은 크게 두가지로 나뉨
- <body> 가장 맨 밑에 위치 시켜서 페이지의 요소가 로드 된 후 호출
- window.onload 를 이용하여 웹 페이지가 로드가 끝나면 스크립트 실행
기존 코드
<html>
<head>
<script>
const helloDiv = document.getElementById("helloDiv");
const addText = helloDiv.innerHTML += "world!";
</script>
</head>
<body>
<div id="helloDiv"> hello </div>
</body>
</html>
해당 요소 밑에 자바스크립트 코드 위치
- div가 온 코드 밑에 위치를 해도 되고 최하단으로 이동해도 됨
- 스크립트 관리의 가독성을 위해 최하단으로 위치하는 것이 보편적임
<html>
<body>
<div id="helloDiv"> hello </div>
</body>
<!-- 최하단으로 코드 이동 -->
<script>
const helloDiv = document.getElementById("helloDiv");
const addText = helloDiv.innerHTML += "world!";
</script>
</html>
자바스크립트 내 window.onload 사용
- window.onload : 웹 페이지가 완전히 로드되고 이미지 및 스크립트를 포함한 모든 콘텐츠가 브라우저에서 다운로드 및 렌더링 될 때 트리거되는 이벤트
- 스크립트 코드의 위치는 상관 없음. 즉, <head> 태그 내에 위치해도 무관함
<html>
<head>
<!-- use window.onload -->
<script>
window.onload = function() {
const helloDiv = document.getElementById("helloDiv");
const addText = helloDiv.innerHTML += "world!";
}
</script>
</head>
<body>
<div id="helloDiv"> hello </div>
</body>
</html>
반응형