메뉴 건너뛰기

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>

?
  • ?
    관리자 2019.11.25 08:51

    문제의 원인은 다음 라인을 수정해야 합니다.
    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()";로 해야 합니다.

    그럼....


QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.21 7106
205 11장 실습문제 6번 arc()문제 new 제발요 2019.12.06 0
204 10장 실습문제 6번 전역변수 설정에 관한 질문 1 제발요 2019.12.04 11
203 8장 실습 문제 5번 2 아리 2019.12.04 8
202 11장 6번 으엉 2019.11.27 25
» document.write 내부에서의 onclick 이벤트 선언에 대한 오류 1 tlqk 2019.11.24 26
200 실습문제 6장 3번-2 1 어려워 2019.11.15 55
199 10장 오픈챌린지 질문입니다. 1 질문있어요 2019.11.10 106
198 서버설치와 코드편집기 질문 드려요~ 1 TS2019 2019.10.26 42
197 7장 6번 문제 질문 1 jj 2019.10.22 78
196 207p 4장 실습문제 3번 질문 1 file 웹개발초보 2019.10.19 46
195 8장 실습문제 2번에 (3)번 2 알려주셔요 2019.10.17 92
194 8장 실습문제 1번에 (2)번 알려주셔요 2019.10.17 43
193 7장 실습문제 1번 질문 드립니다. 1 111 2019.10.15 56
192 span과 text-align : center; 에 관한 문제입니다. file 2019.10.15 22
191 3장 4번 질문입니다 1 질문자 2019.10.04 72
190 3장오픈챌린지 질무닙니다. 1 파랑 2019.09.29 72
189 2장 오디오 실습문제에 대해서 질문이있습니다 1 ㅇㅇㅇ 2019.09.20 52
188 570page 예제 13-7 1 이주원! 2019.09.03 52
187 교재 225page 예제5-8 질문입니다. 1 ㅇㅅㅁ 2019.09.02 47
186 예제 5-6 질문입니다. 1 file 이상민 2019.09.01 58
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 11 Next
/ 11
위로