<!DOCTYPE html>
<html>
<head>
<title>계산기</title>
<style type="text/css">
#butn {width: 70px; padding: 10px}
#txt {width: 280px; height: 20px;}
</style>
<script type="text/javascript">
var first = 0;
function back()
{
var len = txt.value.length;
var backsp = txt.value.substring(0,len-1);
txt.value = backsp;
}
function del()
{
txt.value="0";
first=0;
}
function enter()
{
var exp = txt.value;
txt.value=eval(exp);
}
function inp(obj)
{
if(first==0) //초기 0 지우기
{
txt.value=""
}
first++;
var clik = obj.value;
var exp = txt.value;
txt.value+= clik;
}
</script>
</head>
<body>
<h3>계산기 만들기</h3>
<hr>
<form>
<input id="txt" type="text" value="0">
<br>
<table>
<tbody>
<tr>
<td><input id="butn" type="button" value="BACK" onclick="back()"></td>
<td><input id="butn" type="button" value="CE" onclick="del()"></td>
<td><input id="butn" type="button" value="C" onclick="del()"></td>
<td><input id="butn" type="button" value="=" onclick="enter()"></td>
</tr>
<tr>
<td><input id="butn" type="button" value="7" onclick="inp(this)"></td>
<td><input id="butn" type="button" value="8" onclick="inp(this)"></td>
<td><input id="butn" type="button" value="9" onclick="inp(this)"></td>
<td><input id="butn" type="button" value="/" onclick="inp(this)"></td>
</tr>
<tr>
<td><input id="butn" type="button" value="4" onclick="inp(this)"></td>
<td><input id="butn" type="button" value="5" onclick="inp(this)"></td>
<td><input id="butn" type="button" value="6" onclick="inp(this)"></td>
<td><input id="butn" type="button" value="*" onclick="inp(this)"></td>
</tr>
<tr>
<td><input id="butn" type="button" value="1" onclick="inp(this)"></td>
<td><input id="butn" type="button" value="2" onclick="inp(this)"></td>
<td><input id="butn" type="button" value="3" onclick="inp(this)"></td>
<td><input id="butn" type="button" value="-" onclick="inp(this)"></td>
</tr>
<tr>
<td><input id="butn" type="button" value="0" onclick="inp(this)"></td>
<td><input id="butn" type="button" value="+" onclick="inp(this)"></td>
<td><input id="butn" type="button" value="NONE"></td>
<td><input id="butn" type="button" value="NONE"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
9장 실습문제 10번에 대한 코드를 저렇게 짜봤는데 script 부분에 따로 var txt= document.getElementById("txt")를 하지않아도 작동하네요.. 오히려 저 getElement ... 를 넣으면 작동을 하지 않아요. 왜인가요...??
질문이 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를 달면 됩니다.
몇가지 이유로, 첨부에 이미지로 넣었으니 참고하세요.