JavaScript를 이용해 계산기 만들기

window.onload = function () {
  var calResult = 0; // 총 연산의 결과값
  var oper = null; // 연산자
  var calNum = ""; // 첫 피연산자 이후의 모든 피연산자
  var flag = false; // 첫 연산의 시작(첫 피연산자 입력됨의 여부)
 
  function makeNum(now) {
    // 피연산자 만들기
    if (!flag) flag = true; // 첫번째 피연산자 만들 경우
    if (calNum == "0" && now == 0) {
      // 0의 연속된 숫자 방지 ex) 00000.7 => 0.7로 하기 위해
      calNum = 0;
      return;
    }
    calNum = calNum.concat(now); // **concat:문자열 합치기
  }
 
  function calcuration(nextOper) {
    // 계산하기
    if (!flag) return; // 첫번째 연산자가 나올 경우 (피연산자가 없을 경우)
    if (!oper) {
      // 첫 연산자일 경우, 연산은 하지 않는다. (피연산자 부족)
      oper = nextOper;
      calResult = calNum; // 첫번째 피연산자를 연산 결과의 변수에 넣어주고
      calNum = ""; // 다음 피연산자를 위해 초기화
      return;
    }
    if (oper == "=" || !calNum) {
      // 결과 도출 후 다시 그 결과값으로 연산을 이어갈 경우, 연산자를 변경할 경우
      oper = nextOper;
      return;
    }
 
    if (oper == "+") {
      // 실수 타입~!
      calResult = parseFloat(calResult) + parseFloat(calNum);
      // ** 타입을 바꿔줘야 하고!!!! 복합대입연선자 안됨!! **
    } else if (oper == "-") {
      calResult = parseFloat(calResult) - parseFloat(calNum);
    } else if (oper == "x") {
      calResult = parseFloat(calResult) * parseFloat(calNum);
    } else if (oper == "/") {
      calResult = parseFloat(calResult) / parseFloat(calNum);
    }
 
    calNum = ""; // 연산 후 다음 피연산자를 위해 초기화
    oper = nextOper; // 현재의 연산자를 입력
  }
 
  function reset() {
    // C 버튼의 초기화
    calResult = 0;
    oper = null;
    start = "";
    calNum = "";
    flag = false;
  }
 
  // C 버튼
  document.getElementById("cancel").addEventListener("click", function () {
    reset();
    document.getElementById("show").innerText = calResult;
  });
 
  // 연산자
  document.getElementById("multi").addEventListener("click", function () {
    calcuration("*");
    document.getElementById("show").innerText = calResult;
  });
  document.getElementById("divi").addEventListener("click", function () {
    calcuration("/");
    document.getElementById("show").innerText = calResult;
  });
  document.getElementById("plus").addEventListener("click", function () {
    calcuration("+");
    document.getElementById("show").innerText = calResult;
  });
  document.getElementById("minus").addEventListener("click", function () {
    calcuration("-");
    document.getElementById("show").innerText = calResult;
  });
  document.getElementById("result").addEventListener("click", function () {
    calcuration("=");
    document.getElementById("show").innerText = calResult;
  });
 
  // 피연산자와 dot(.)
  document.getElementById("dot").addEventListener("click", function () {
    makeNum(".");
    document.getElementById("show").innerText = calNum;
  });
  document.getElementById("zero").addEventListener("click", function () {
    makeNum(0);
    document.getElementById("show").innerText = calNum;
  });
  document.getElementById("one").addEventListener("click", function () {
    makeNum(1);
    document.getElementById("show").innerText = calNum;
  });
  document.getElementById("two").addEventListener("click", function () {
    makeNum(2);
    document.getElementById("show").innerText = calNum;
  });
  document.getElementById("three").addEventListener("click", function () {
    makeNum(3);
    document.getElementById("show").innerText = calNum;
  });
  document.getElementById("four").addEventListener("click", function () {
    makeNum(4);
    document.getElementById("show").innerText = calNum;
  });
  document.getElementById("five").addEventListener("click", function () {
    makeNum(5);
    document.getElementById("show").innerText = calNum;
  });
  document.getElementById("six").addEventListener("click", function () {
    makeNum(6);
    document.getElementById("show").innerText = calNum;
  });
  document.getElementById("seven").addEventListener("click", function () {
    makeNum(7);
    document.getElementById("show").innerText = calNum;
  });
  document.getElementById("eight").addEventListener("click", function () {
    makeNum(8);
    document.getElementById("show").innerText = calNum;
  });
  document.getElementById("nine").addEventListener("click", function () {
    makeNum(9);
    document.getElementById("show").innerText = calNum;
  });
};