[복습] 연달아 계산하기

📍 복습

1 + 2 + 4 를 계산을 할 수 있도록 코드를 만들어 보자.

1️⃣ 1 + 2 를 계산해 3이 된다.
2️⃣ 그 다음에 3 + 4를 계산하게 된다.
3️⃣ 1 + 2 를 계산할 때 3을 numOne에 저장하고 numTwo 는 비워둔다.
4️⃣ + 와 4를 누르면 각각 operator 와 numTwo 에 저장한다.
5️⃣ = 를 누르면 3 과 4가 더해진다.

---

🧑🏻‍💻 : code

if문 안에 추가

    $operator.value = '';
    numOne = $result.value;
    operator = '';
    numTwo = '';

---

🧑🏻‍💻 : 전체 code

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


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) {
    switch (operator) {
      case '+':
        $result.value = parseInt(numOne) + parseInt(numTwo);
        break;
      case '-':
        $result.value = numOne - numTwo;
        break;
      case '*':
        $result.value = numOne - numTwo;
        break;
      case '/':
        $result.value = numOne - numTwo;
        break;
      default:
        break;
    }
    $operator.value = '';
    numOne = $result.value;
    operator = '';
    numTwo = '';
  } else {
    alert('숫자를 먼저 입력하세요.');
  }
});
document.querySelector('#clear').addEventListener('click', () => {
  numOne = '';
  operator = '';
  numTwo = '';
  $operator.value = '';
  $result.value = '';
});

---

🚨 보완하기

현재 만들어진 계산기는 연달아 계산할 때 1 + 2 후 = 을 눌러 값을 받아낸 뒤 다시 연산자와 숫자를 입력해야 하는 번거로움이 있다.
이를 보완하여 = 을 누르지 않고 바로 연산자와 숫자를 연달아 눌러 식을 계산할 수 있도록 만들어 보자.

---

✏️ 순서도 수정하기

---

🧑🏻‍💻 : code

onClickOperator 함수 안의 if문 내부에 추가

const onClickOperator = (op) => () => {
  if (numTwo) {
    switch (operator) {
      case '+':
        $result.value = parseInt(numOne) + parseInt(numTwo);
        break;
      case '-':
        $result.value = numOne - numTwo;
        break;
      case '*':
        $result.value = numOne - numTwo;
        break;
      case '/':
        $result.value = numOne - numTwo;
        break;
      default:
        break;
    }
    $operator.value = '';
    numOne = $result.value;
    operator = '';
    numTwo = '';
  }
  if (numOne){ 
    operator = op;
    $operator.value = op;
  } else {
    alert('숫자를 먼저 입력해 주세요.');
  }
}

---

🧑🏻‍💻 : 전체 code

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


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 (numTwo) {
    switch (operator) {
      case '+':
        $result.value = parseInt(numOne) + parseInt(numTwo);
        break;
      case '-':
        $result.value = numOne - numTwo;
        break;
      case '*':
        $result.value = numOne - numTwo;
        break;
      case '/':
        $result.value = numOne - numTwo;
        break;
      default:
        break;
    }
    $operator.value = '';
    numOne = $result.value;
    operator = '';
    numTwo = '';
  }
  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) {
    switch (operator) {
      case '+':
        $result.value = parseInt(numOne) + parseInt(numTwo);
        break;
      case '-':
        $result.value = numOne - numTwo;
        break;
      case '*':
        $result.value = numOne - numTwo;
        break;
      case '/':
        $result.value = numOne - numTwo;
        break;
      default:
        break;
    }
    $operator.value = '';
    numOne = $result.value;
    operator = '';
    numTwo = '';
  } else {
    alert('숫자를 먼저 입력하세요.');
  }
});
document.querySelector('#clear').addEventListener('click', () => {
  numOne = '';
  operator = '';
  numTwo = '';
  $operator.value = '';
  $result.value = '';
});

---

💟 완성