간단한 계산기를 자바스크립트로 구현하려고 하는데 자바스크립트 오류가 나서 질문드려요...

Question

간단한 계산기를 자바스크립트로 구현하려고 하는데 자바스크립트 오류가 나서 질문드려요...

조회수 883회

html

javascript

0

싫어요

사칙연산의 순서와 상관없이 짠 간단한 계산기 입니다. 계산기의 로직이 궁금한것이 아니고 var calcul = {} 이라는 객체를 생성하여 해당 객체에 symBol이라는 메소드와 calc라는 메소드를 작성을 하였는데 calc라는 메소드 내에서 symBol 메소드를 사용할때 오류가 발생합니다.

만약 calc메소드만 객체내에 구현하면 문제가 없는데 같은 객체내에 구현시 문제가 생깁니다... 무슨 문제인지 모르겠습니다.. 도와주세요...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>1주차 계산기</h1>
    <input type="text" id="num_ipt">
    <button id="btn1">계산</button>
    <div id="demo"></div>
    <script>
        var input = document.getElementById('num_ipt');
        var button = document.getElementById('btn1');

        var calcul = {};

        calcul.symBol = function (sym, n1, n2){
            switch(sym){
                case "+":
                    return n1+n2;
                case "-":
                    return n1-n2;
                case "*":
                    return n1*n2;
                case "/":
                    return n1/n2;
                default:
                    return "fail"; // 오류제거
            }
        };
        /*
        이렇게 하면 오류가 안납니다...
        var symBol = function (sym, n1, n2){
            switch(sym){
                case "+":
                    return n1+n2;
                case "-":
                    return n1-n2;
                case "*":
                    return n1*n2;
                case "/":
                    return n1/n2;
                default:
                    return "fail"; // 오류제거
            }
        };
        */

        calcul.calc = function (){

            var test_ipt = input.value.split("");

            while(true){

                if(test_ipt.length === 1) break;

                var n1 = Number(test_ipt.shift());
                var sym = test_ipt.shift();
                var n2 = Number(test_ipt.shift());

                var unShift_num = this.symBol(sym, n1, n2);
                if(unShift_num === "fail") { // 오류확인
                    console.log("fail");
                    return;
                }

                test_ipt.unshift(unShift_num);
            }
            console.log(test_ipt);
        };



        button.onclick = calcul.calc;
    </script>
</body>
</html>

haesungJoo 5 points

2020-09-04 01:57:01에 작성됨

댓글 입력

score 2 · Accepted Answer

문의하실 때, 발생한 오류 내용을 같이 포함해주시기 바랍니다.

test.html:63
Uncaught TypeError: this.symBol is not a function at HTMLButtonElement.calcul.calc (test.html:63)

button.onclick = calcul.calc; 은 calcul과는 상관없이 calcul.calc 함수만을 전달합니다. 함수는 button.onclick을 통해 호출되었기 때문에 해당 함수 내에서 this.symBol 호출 시 button.symBol이 호출됩니다.

button.symBol 은 function을 할당한 적이 없기 때문에 오류가 발생합니다. function을 할당 후 로그를 추가하였으니 수정한 내용을 로그를 따라가며 확인해보시기 바랍니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>1주차 계산기</h1>
    <input type="text" id="num_ipt">
    <button id="btn1">계산</button>
    <div id="demo"></div>
    <script>
        var input = document.getElementById('num_ipt');
        var button = document.getElementById('btn1');

        var calcul = {};

        calcul.symBol = function (sym, n1, n2){
            console.log("calc.symBol");
            switch(sym){
                case "+":
                    return n1+n2;
                case "-":
                    return n1-n2;
                case "*":
                    return n1*n2;
                case "/":
                    return n1/n2;
                default:
                    return "fail"; // 오류제거
            }
        };

        var symBol = function (sym, n1, n2){
            console.log("symBol");
            switch(sym){
                case "+":
                    return n1+n2;
                case "-":
                    return n1-n2;
                case "*":
                    return n1*n2;
                case "/":
                    return n1/n2;
                default:
                    return "fail"; // 오류제거
            }
        };
        // 아래 할당이 없을 시 this.symBol에서 에러 발생
        button.symBol = function (sym, n1, n2){
            console.log("button.symBol");
            switch(sym){
                case "+":
                    return n1+n2;
                case "-":
                    return n1-n2;
                case "*":
                    return n1*n2;
                case "/":
                    return n1/n2;
                default:
                    return "fail"; // 오류제거
            }
        };

        calcul.calc = function (){

            var test_ipt = input.value.split("");

            while(true){

                if(test_ipt.length === 1) break;

                var n1 = Number(test_ipt.shift());
                var sym = test_ipt.shift();
                var n2 = Number(test_ipt.shift());
                var unShift_num = calcul.symBol(sym, n1, n2); // calcul.symBol 호출
                var unShift_num = symBol(sym, n1, n2); // symBol 호출
                // this 는 button 입니다.
                var unShift_num = this.symBol(sym, n1, n2); // button.symBol 호출
                if(unShift_num === "fail") { // 오류확인
                    console.log("fail");
                    return;
                }

                test_ipt.unshift(unShift_num);
            }
            console.log(test_ipt);
        };


        // calcul 객체를 할당한 것이 아닌 function을 할당한 것입니다.
        // button.onclick = calcul.calc; // 해당 줄은 아래 코드와 같습니다.
        button.onclick = function (){

            var test_ipt = input.value.split("");

            while(true){

                if(test_ipt.length === 1) break;

                var n1 = Number(test_ipt.shift());
                var sym = test_ipt.shift();
                var n2 = Number(test_ipt.shift());
                var unShift_num = calcul.symBol(sym, n1, n2); // calcul.symBol
                var unShift_num = symBol(sym, n1, n2); // symBol
                // this 는 button 입니다.
                var unShift_num = this.symBol(sym, n1, n2); // button.symBol
                if(unShift_num === "fail") { // 오류확인
                    console.log("fail");
                    return;
                }

                test_ipt.unshift(unShift_num);
            }
            console.log(test_ipt);
        };
    </script>
</body>
</html>