메뉴 건너뛰기

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 18177
262 9장 연습문제8번 1 한정수 2018.12.13 336
261 안녕하세요 처음하는 사람입니다 교재 구입하였습니다 2 성현군 2017.06.29 330
260 실습문제 4장의 8번 2 file ㅁㄴㅇㄹ 2018.12.14 329
259 구버전 책을 구입해버렸어요.. 3 구닥 2018.05.07 329
258 실습문제 5장 3번 254p 1 RVQ 2018.05.10 328
257 명품 html5+css3책과 HTML의 차이가 궁금합니다 저자님 2 보안 2019.05.03 326
256 7장 10번 트레비 2018.12.18 321
255 실습문제 9-8번 질문 있습니다. 2 muuum 2018.10.24 320
254 7장 2번 무지 2018.12.18 319
253 page 46 마우스 올릴시 이미지 출력 2 file 공부중 2020.09.10 318
252 8장 실습문제 2번에 (3)번 2 알려주셔요 2019.10.17 317
251 6장 예제 6-23 1 은성 2017.04.04 317
250 7장 1번 1 2020.11.30 311
249 실습문제답도 제공이 안되는 건가요? 2 아침이 2019.01.07 311
248 5장 10번 실습문제 1 익명 2018.09.29 311
247 9장 실습문제 9번 문의사항 1 file 이태복 2018.04.03 309
246 자바스크립트에 대해 1 이윤재 2017.01.26 309
245 질문드립니다. 1 ㅇㅇ 2020.06.03 306
244 예제 3-11 1 새싹 2018.04.23 301
243 실습문제 9-7번 답안지를 보고 질문있습니다. 2 muuum 2018.10.23 300
목록
Board Pagination Prev 1 ... 3 4 5 6 7 8 9 10 11 12 ... 21 Next
/ 21
위로