메뉴 건너뛰기

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 07: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.20 9516
212 예제 2-21 1 Daisy 2020.03.28 28
211 7장의 8번문제 1 궁금 2020.03.20 107
210 71page 1 아리송 2020.03.07 26
209 1장 test1, 2, 3 파일 2 열공중 2020.03.07 80
208 html에 css작성할때 2 궁금이 2020.03.03 43
207 61 page 실습문제 1번 오류찾기 2 궁금이 2020.02.15 489
206 한글 타이틀이 깨져 보입니다. 1 안스가리오 2020.01.06 46
205 11장 실습문제 6번 arc()문제 제발요 2019.12.06 126
204 10장 실습문제 6번 전역변수 설정에 관한 질문 1 제발요 2019.12.04 143
203 8장 실습 문제 5번 3 아리 2019.12.04 102
202 11장 6번 으엉 2019.11.27 100
» document.write 내부에서의 onclick 이벤트 선언에 대한 오류 1 tlqk 2019.11.24 105
200 실습문제 6장 3번-2 1 어려워 2019.11.15 100
199 10장 오픈챌린지 질문입니다. 1 질문있어요 2019.11.10 194
198 서버설치와 코드편집기 질문 드려요~ 1 TS2019 2019.10.26 68
197 7장 6번 문제 질문 1 jj 2019.10.22 129
196 207p 4장 실습문제 3번 질문 1 file 웹개발초보 2019.10.19 68
195 8장 실습문제 2번에 (3)번 2 알려주셔요 2019.10.17 150
194 8장 실습문제 1번에 (2)번 알려주셔요 2019.10.17 101
193 7장 실습문제 1번 질문 드립니다. 1 111 2019.10.15 88
목록
Board Pagination Prev 1 ... 2 3 4 5 6 7 8 9 10 ... 15 Next
/ 15
위로