계산기 만들기

const $operator = document.querySelector("#operator"),
  $result = document.querySelector("#result");

let numOne = "";
let numTwo = "";
let operator = "";

const onClickNumber = (event) => {
  if (operator) {
    //비어있지 않다
    if (!numTwo) {
      $result.value = "";
    }
    numTwo += event.target.textContent;
  } else {
    //비어있다
    numOne += event.target.textContent;
  }
  $result.value += event.target.textContent;
};

// 고차함수 (high order function)
document.querySelector("#num-0").addEventListener("click", onClickNumber);
document.querySelector("#num-1").addEventListener("click", onClickNumber);
document.querySelector("#num-2").addEventListener("click", onClickNumber);
document.querySelector("#num-3").addEventListener("click", onClickNumber);
document.querySelector("#num-4").addEventListener("click", onClickNumber);
document.querySelector("#num-5").addEventListener("click", onClickNumber);
document.querySelector("#num-6").addEventListener("click", onClickNumber);
document.querySelector("#num-7").addEventListener("click", onClickNumber);
document.querySelector("#num-8").addEventListener("click", onClickNumber);
document.querySelector("#num-9").addEventListener("click", onClickNumber);

const onClickOperator = (op) => () => { 
//함수 안에 함수를 불러내는 것인데, 만약 중간 화살표함수를 하나를 지울경우 값을 인식하지 못한다.
  if (numOne) {
    operator = op;
    $operator.value = op;
    //화면을 바꾸고, 데이터도 바꾸고 잊지말아야한다.
  } else {
    alert("숫자를 입력하세요");
  }
};
document.querySelector("#plus").addEventListener("click", onClickOperator("+"));
document
  .querySelector("#minus")
  .addEventListener("click", onClickOperator("-"));
document
  .querySelector("#divide")
  .addEventListener("click", onClickOperator("/"));
document
  .querySelector("#multiply")
  .addEventListener("click", onClickOperator("*"));
document.querySelector("#calculate").addEventListener("click", () => {
  if (numTwo) {
    if (operator === "+") {
      $result.value = parseInt(numOne) + parseInt(numTwo);
      //numOne 과 numTwo는 string으로 처음에 값을 넣었기 때문에 결과값이 나오게 하기 위해서
      //둘다 parseInt로 숫자로 type을 변경 시킨다.
    } else if (operator === "-") {
      $result.value = parseInt(numOne) - parseInt(numTwo);
    } else if (operator === "/") {
      $result.value = parseInt(numOne) / parseInt(numTwo);
    } else if (operator === "*") {
      $result.value = parseInt(numOne) * parseInt(numTwo);
    }
    $operator.value = ""; //numOne 연산자 numTwo 가 끝나고 결과 값이 나오고 그 다음 또 다른 
//계산을 하게 하기 위하여 아래코드를 추가시켰다.
    numOne = $result.value;
    operator = "";
    numTwo = "";
  } else {
    alert("숫자를 입력하세요!! ");
  }
});

document.querySelector("#clear").addEventListener("click", () => {
  location.reload();
});

        * { box-sizing: border-box }
        #result { width: 180px; height: 50px; margin: 5px; text-align: right }
        #operator { width: 50px; height: 50px; margin: 5px; text-align: center }
        button { width: 50px; height: 50px; margin: 5px }

    <input readonly id="operator">
    <input readonly type="number" class="result">
    <div class="row">
        <button id="num-7">7</button>
        <button id="num-8">8</button>
        <button id="num-9">9</button>
        <button id="plus">+</button>
    </div>
    <div class="row">
        <button id="num-4">4</button>
        <button id="num-5">5</button>
        <button id="num-6">6</button>
        <button id="minus">-</button>
    </div>
    <div class="row">
        <button id="num-1">1</button>
        <button id="num-2">2</button>
        <button id="num-3">3</button>
        <button id="divide">/</button>
    </div>
    <div class="row">
        <button id="clear">C</button>
        <button id="num-0">0</button>
        <button id="calculate">=</button>
        <button id="multiply">x</button>
    </div>
    <script src="pratice.js"></script>

 

Html의 요소마다 Id를 줘서 click했을 때, event가 발생하게 해주었다.그리고 그 값이 무엇인지 들어있기에 값을 결과값에 주기로 했다.