질문이 2가지네요. 한 가지 씩 알아봅시다.
1. 먼저 var txt= document.getElementById("txt")를 사용하지 않아도 작동하는 이유?
HTML4까지는 그냥 var txt= document.getElementById("txt") 코드를 사용하지 않고
txt.value = "0"과 같이 그냥 txt를 사용하면 HTML 브라우저들이 id가 txt인 HTML엘리먼트로 처리하였습니다.
하지만 HTML5에서는 이 방식은 표준이 아닙니다.
그럼에도 불구하고 HTML5 이전 시절에 작성된 웹페이지들을 위해 현재의 브라우저들이
txt.value = "0"과 같이 그냥 txt만 사용해도 처리해주고 있는 것 같습니다.
앞으로 var txt= document.getElementById("txt")를 이용하는 것이 바람직합니다.
2. var txt= document.getElementById("txt")를 넣으면 작동하지 않는다?
현재의 코드에서 아래와 같은 위치에 넣으면 오류가 발생합니다.
<script type="text/javascript">
var first = 0;
var txt= document.getElementById("txt"); // 이곳
왜냐하면 이 코드가 실행되는 시점에서는 아직 <body> 이하 부분이 처리(파싱)되지 않아
브라우저는 어떤 태그가 있는지 알 수 없기 때문입니다.
그래서 이 문제를 해결하는 방법은 여러가지 가 있는데 다음과 같이 하면 됩니다.
<script type="text/javascript">
var first = 0;
뒤에, HTML 페이지가 완전히 로딩된 후, txt= document.getElementById("txt"); 가 실행되도록
질문이 2가지네요. 한 가지 씩 알아봅시다.
1. 먼저 var txt= document.getElementById("txt")를 사용하지 않아도 작동하는 이유?
HTML4까지는 그냥 var txt= document.getElementById("txt") 코드를 사용하지 않고
txt.value = "0"과 같이 그냥 txt를 사용하면 HTML 브라우저들이 id가 txt인 HTML엘리먼트로 처리하였습니다.
하지만 HTML5에서는 이 방식은 표준이 아닙니다.
그럼에도 불구하고 HTML5 이전 시절에 작성된 웹페이지들을 위해 현재의 브라우저들이
txt.value = "0"과 같이 그냥 txt만 사용해도 처리해주고 있는 것 같습니다.
앞으로 var txt= document.getElementById("txt")를 이용하는 것이 바람직합니다.
2. var txt= document.getElementById("txt")를 넣으면 작동하지 않는다?
현재의 코드에서 아래와 같은 위치에 넣으면 오류가 발생합니다.
<script type="text/javascript">
var first = 0;
var txt= document.getElementById("txt"); // 이곳
왜냐하면 이 코드가 실행되는 시점에서는 아직 <body> 이하 부분이 처리(파싱)되지 않아
브라우저는 어떤 태그가 있는지 알 수 없기 때문입니다.
그래서 이 문제를 해결하는 방법은 여러가지 가 있는데 다음과 같이 하면 됩니다.
<script type="text/javascript">
var first = 0;
뒤에, HTML 페이지가 완전히 로딩된 후, txt= document.getElementById("txt"); 가 실행되도록
window.onload를 달면 됩니다.
몇가지 이유로, 첨부에 이미지로 넣었으니 참고하세요.