9장 실습문제 10번을 코딩하면서 한가지 문제가 생겼습니다.
<!DOCTYPE html>
<head>
<title>이벤트 객체의 target</title>
<script>
var array = new Array(
"back", "ce", "c", "=",
"7", "8", "9", "/",
"4", "5", "6", "*",
"1", "2", "3", "-",
"0", "+", "none", "none"
);
var is_1st = false;
function func(obj) {
// var text = document.getElementById("text_field");
// if (obj.value == "=") {
// text.value = eval(text.value);
// }
// if (!is_1st&&obj.value) {
// text.value = "";
// text.value = obj.value;
// is_1st = true;
// }
// else {
// text.value = obj.value;
// }
}
</script>
</head>
<body>
<h3>계산기만들기</h3>
<hr>
<input type="text" value="0" id="text_field" style="width:350px"><br>
<div id="div"></div>
<script>
for (var i = 0; i < array.length; i++) {
if (i % 4 == 0) {
document.write("<br>");
}
document.write("<input type=\"button\" value=\"");
document.write(array[i] + "\" style=\"margin:10px;width:50px;\" ");
document.write("onclick=\"" + func(this) + "\">"); // <<<<<<여기에서 document write로 func을 onclick 이벤트로 붙였는데 웹을 만들어보면 버튼을 누르지 않아도 이미 버튼이 눌린상태가 지속됩니다. 왜 해당 상태가 일어나는지 궁금합니다
}
</script>
</body>
</html>
문제의 원인은 다음 라인을 수정해야 합니다.
document.write("onclick=\"" + func(this) + "\">");
----> document.write("onclick=\"" + "func(this)" + "\">");
왜냐하면 "onclick=\"" + func(this) 의 의미는 "onclick=" 문자열에 func(this)를 호출하고 그 리턴값을 연결한다는 뜻입니다.
func(this)를 호출하면 아무 것도 리턴하지 않습니다. 그러므로
문자열의 연결 결과
onclick="undefined"가 되는 겁니다.
그러므로 질문자의 코드로 하면, click 리스너가 제대로 붙지 않게 되지요.
다른 간단한 예를 들어 설명해봅시다.
function f() {
return "hello";
}
var text = "a=" + f(); 의 문장은 문자열 a에 f()을 호출하여 리턴한 결과 "hello"를 연결한 결과 text가 "a=hello"가 되는 겁니다.
지금 질문자가 text를 "a=f()"로 만들고자 한다면
var text = "a=" + "f()";로 해야 합니다.
그럼....