자바 스크립트는 맨 윗 줄부터 차례로 실행되기 때문에
<head>에 작성한 <script> 태그에서 <body> 태그 안의 요소를 불러오려 할 경우 에러가 발생한다.
이를 해결하기 위해 window.onload 함수를 사용할 수 있다.
window.onload 함수 안의 요소는 페이지의 모든 요소가 실행된 뒤 가장 마지막에 실행되기 때문에
<head>에 작성한 <script> 태그에서 <body> 태그 안의 요소를 사용할 수 있게 된다.
< 에러 발생 코드 >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
var list1 = ["apple", "banana", "kiwi"];
document.getElementById("demo").innerHTML = list1[2];
var list2 = new Array("red", "yellow", "green");
document.getElementById("demo2").innerHTML = list2[0];
</script>
</head>
<body>
<p id="demo"></p>
<p id="demo2"></p>
</body>
</html>
< 정상 실행 코드 >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload = function() {
var list1 = [ "apple", "banana", "kiwi" ];
document.getElementById("demo").innerHTML = list1[2];
var list2 = new Array("red", "yellow", "green");
document.getElementById("demo2").innerHTML = list2[0];
}
</script>
</head>
<body>
<p id="demo"></p>
<p id="demo2"></p>
</body>
</html>
'프론트엔드 > JavaScript' 카테고리의 다른 글
| [JavaScript] Validation Check (0) | 2021.05.21 |
|---|---|
| [JavaScript] JSON parse (0) | 2021.05.21 |
| [JavaScript] JSON (0) | 2021.05.21 |
| [JavaScript] 배열 (0) | 2021.05.20 |
| [JavaScript] 자바스크립트 기초 정리 (0) | 2021.05.18 |