<!DOCTYPE html>
<html lang="ko">
<head>
<title>계산기 만들기
</title>
<style>
</style>
<meta charset="utf-8">
<script>
var test_array = [["Back","CE","C","="],["7","8","9","/"],["4","5","6","*"],["1","2","3","-"],["0","+","NONE","NONE"]];
window.onload = function (){
var tb = document.getElementById("tb");
for (var i=0;i<5;i++){
var row = document.createElement("tr");
for (var j=0;j<4;j++){
var col = document.createElement("td");
var bt = document.createElement("button");
bt.innerHTML = test_array[i][j];
bt.style.height = "40px";
bt.style.width = "60px";
bt.addEventListener("click",send_text);
col.appendChild(bt);
row.appendChild(col);
}
tb.appendChild(row);
}
bt.addEventListener("click",send_text);
} // 계산기 생성
var exp = "";
function send_text(e){
exp += e.target.innerHTML;
document.getElementById("text1").value = exp;
}
</script>
</head>
<body>
<h2>계산기 만들기</h2>
<hr>
<form>
<input type="text" value="0" id="text1">
<table id= "tb">
</table>
</form>
</body>
</html>
계산기를 클릭하는 부분에서 숫자 1을 클릭을하면 text박스안에 값이 0 -> 1 -> 0 다시 이런식으로 됩니다. 그 이유가 왜인지 알려주실수 있을까요
꽤 어려운 문제를 마주치게 되었군요.
문제의 원인은 <button> 태그의 활용에 있습니다.
교재의 134페이지의 잠깐 부분을 참고해보세오.
<button>은 기본적으로 <buttton type="submit"> 의 속성을 가진 태그입니다. 그래서 버튼을 클릭하면 send_text() 함수를 호출한 다음
폼 데이터를 모두 서버로 전송합니다. 그런데 현재 form 태그가 잘 만들어져 있지 않기 때문에(서버로 전송하지 않기 때문에)
웹페이지를 reload를 하는 것으로 끝내게 됩니다. 그래서 예를 들면 버튼 7을 누르면 7이 input 창에 나오고 난 뒤 reload되 어 버리니까 다시 0으로 되는 것입니다.
해결책은 두 가지 인데
1. <form> 태그를 없애 버리세요. 어짜피 서버로 전송할 것은 아니잖아요?
2. 아니면 다음과 같이 bt 객체를 만든다음 type 속성을 "button"으로 만들면 됩니다.
var bt = document.createElement("button");
bt.setAttribute("type", "button");
그러면 버튼은 <button type="button"> 이 되겄지요.
아! 그리고 for문을 빠져 나온 다음에 있는 다음 라인은 지워야 합니다.
bt.addEventListener("click",send_text);