개밝
73
2021-07-13 14:54:33 작성 2021-07-13 14:56:13 수정됨
5
235

자바스크립트] 사칙연산 구현 질문입니다.


안녕하세요 선배님들! 자바스크립트를 이용하여 동적으로 계산기 만들어 보고 있습니다. 

다른 버튼들은 다 구현한 상태이고 이제 사칙연산 구현을 하려고 하는데요 

eval함수 말고는 다른 방법이 떠오르지 않아 구현해보았는데 

3+3 입력 후 = (result함수 호출)을 클릭하면 같은 값인 3+3이 출력됩니다 

>> 3+33+3 이런식으로요 .. 

무엇이 틀린건지 한번 검토 부탁드려도 될까요? 너무 두서없이 설명 드린 것 같아 전체 소스도 첨부합니다 ㅠㅠ

+) eval 함수를 제외하고도 다른 방법으로는 어떻게 구현할 수 있는지 조언해주시면 정말 정말 감사하겠습니다.....

전부 JS로 구현하려니 너무 어렵고 구글링도 쉽지 않아서요.. 항상 글 읽어주시고 도움주셔서 감사합니다. 아래는 소스입니다! 


window.onload = function() {
    create();
}

//IE에서 forEach문 사용 위해
if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
  }
/* 계산기만들기 */
function create(options) {
    
    var calculator = document.createElement('div');
    var top = document.createElement('div');
    var ac =document.createElement('button');
    var c =document.createElement('button');
    var ce =document.createElement('button');
    var input = document.createElement("input");
    var input2 = document.createElement("input");
    
    
    calculator.setAttribute("id",calculator);
    input.setAttribute("type","text");
    input.setAttribute("id","display");
    input2.setAttribute("type","text");
    input2.setAttribute("id","tmp");
    ac.className="ac";
    ac.innerHTML ="AC";
    c.className="c";
    c.innerHTML ="C";
    ce.className="ce";
    ce.innerHTML ="CE";
    

    top.appendChild(input);
    top.appendChild(input2);
    calculator.appendChild(top);
    document.body.appendChild(calculator);


    /* css 넣기 (계산기 생성할때 편하도록) */
    var head = document.querySelector("head");
    var link = document.createElement("link");
    link.href = "calc.css";
    link.rel = "stylesheet";
    head.appendChild(link);


    var table = document.createElement("table");

    var data = new Array();
    var one = ["7","8","9","×"];
    var two = ["4","5","6","÷"];
    var thr =  ["1","2","3","+"];
    var fou =  [".","0","+/-","="]; 


    data[0] = one;
    data[1] = two;
    data[2] = thr;
    data[3] = fou;
    
    for(var i=0;i<data.lengthi++){
        var tr = document.createElement('tr'); 

        for(var j=0;j<data[i].length;j++) { 

            var btndocument.createElement("button");
            btn.innerHTML = data[i][j];
          //  btn.appendChild(data[i][j]);

            if(isNaN(data[i][j]))
                btn.className = "cal";
            else
                btn.className = "num";


            if(btn != undefined && btn != null) {
            
                var oneTd = document.createElement('td');
                
                tr.appendChild(oneTd);
                
                oneTd.appendChild(btn);
            }
        }
        
        table.appendChild(tr);
    }

   




    var calculator_holder = document.createElement('div');
    
  
      
    calculator_holder.appendChild(c);
    calculator_holder.appendChild(ce);
    calculator_holder.appendChild(ac);
    calculator_holder.appendChild(table);   
    
    calculator.appendChild(calculator_holder);

/* 사칙연산 */
    

/* 버튼이벤트 */

    var buttons = table.querySelectorAll("button");

    buttons.forEach(function (button) {

        button.addEventListener("click",function(event) {
            
            if (event.target.innerHTML == "+/-"
                reverse();
            else if (event.target.innerHTML === "=") {
                result();
            } else {
                document.getElementById("display").value += event.target.innerHTML
                console.log (event.target.innerHTML);
            }  
        })
    })
    var resultvals;

    /* 연산과 결과값 저장 << 질문드린 부분입니다 !!!! */
    function result() {

       display.value += eval(display).value;
        tmp.value = tmp.value + display.value;
        resultvals = display.value;
    }


    /* C 이벤트 */

    c.addEventListener("click",function(event){
        display.value = "";
    })

    /* CE 이벤트 */
    ce.addEventListener("click",function(event){
       display.value = display.value.substring(0,display.value.length-1);
})

    /* AC 이벤트 */
    ac.addEventListener("click"function(event){
        display.value ="";
        tmp.value = "";

    })
    /* 음수 구현 */
    function reverse() {
        display.value = (display.value) * -1;
         }
}


0
  • 답변 5

  • buSSat
    147
    2021-07-13 15:05:01
  • howoni123
    1k
    2021-07-13 15:05:21
    function result() {
        temp = display.value.replace("÷","/").replace("×","*");
        display.value = eval(temp);
        //tmp.value = tmp.value + display.value;
        //resultvals = display.value;
    }


  • 개밝
    73
    2021-07-13 15:11:07

    못난개발자 님 답변 감사드립니다 !! 저도 eval을 사용하고 싶지는 않지만 다른 방법을 못찾아서요.. ㅠㅠ 혹시 조언 부탁드려도 될까요? 


    howoni123 님 답변 감사드립니다 !! 너무너무 간단하게 해결됐습니다.. ㅠㅠ replace에 대해 공부해보겠습니다 감사합니다 ! 

  • howoni123
    1k
    2021-07-13 15:16:03 작성 2021-07-13 15:17:29 수정됨

    eval 말고 다른 방법 많아요 :D.. 구글에 계산기 코딩만쳐도...(전위표기법, 후위표기법)

  • 개밝
    73
    2021-07-13 15:18:44 작성 2021-07-13 15:19:44 수정됨

    howoni123  네넨 방법은 많은데 제가 활용이 잘 안돼서 일단 알려주신 대로 넣어놓고 고민하면서 바꿔보겠습니다 !! 감사합니다 :)


    +) 아 전위,후위 표기법 기사 시험때 봤던 기억이 있습니다!! 한번 찾아보겠습니다 감사합니다 ㅎㅎ

  • 로그인을 하시면 답변을 등록할 수 있습니다.