calculator

calculator 만들기

const calculator = document.querySelector('.calculator');
const buttons = document.querySelector('.calculator__buttons');
const firstOperend = document.querySelector('.calculator__operend--left');
const operator = document.querySelector('.calculator__operator');
const secondOperend = document.querySelector('.calculator__operend--right');
const calculatedResult = document.querySelector('.calculator__result');

//enter 버튼을 눌렀을때, 작동하는 함수 
function calculate(n1,operator,n2){
  let result = 0;
  
  n1 = Number(n1);
  n2 = Number(n2);
  
  if(operator==='+') //여기서 operator는 매개변수 operator. 
  {
    result = n1+n2;
  }
  else if(operator==='-')
  {
    result = n1-n2;
  }
  else if(operator==='*')
  {
    result = n1*n2;
  }
  else if(operator==='/')
  {
    result = n1/n2;
  }
  
  return String(result);
}

let isFilled=false; 

buttons.addEventListener('click',function(event){
  
  const target = event.target;
  const action = target.classList[0];
  const buttonContent = target.textContent; //textContent는 string을 리턴한다.
	
  if(target.matched('button'))
  {
    if(action==='number' && isFilled===false)
    {
      firstOperend.textContent = buttonContent;
      isFilled=true;
      return; //return하지 않으면 다음 조건도 이어서 만족하므로 첫번째와 두 번째 숫자가 같게 출력되므로 꼭 return을 해줘야한다!
    }
    if(action==='number' && isFilled)
    {
      secondOperend.textContent = buttonContent;
    }
    if(action==='operator')
    {
      operator.textContent = buttonContent;
    }
    if(action==='decimal')
    {
      //console.log('소수점 버튼');
    }
    if(action==='clear')
    {
      firstOperend.textContent = '0';
      secodnOperend.textContent = '0';
      operator.textContent = '+';
      calculatedResult.textContent = '0';
      
      return isFilled = false;
    }
    if(action==='calculate')
    {
      calculate(firstOperend.textContent,operator.textContent,secondoperend.textContent);
      calculateResult.teextContent = result;
    
    }
  }
  
});

textContent

let isFilled=false

클릭된 버튼이 '숫자'이고, 클릭 전 입력값이 없는 경우, firstOperend에 클릭값을 할당하고, isFilled에 true를 재할당한다.

if(action==='number' && firstOperend.textContent==='0'){
  firstOperend.textContent = buttonContent;
}
if(action==='number' && firstOperend.textContent!=='0'){
  secondOperend.textContent = buttonContent;
}

만약 isFilled를 선언하지 않고, 위와 같이 firstOperend.textContent==='0'인지 아닌지로 조건을 나눈다면, 어떤 문제가 발생할까?
buttonContent==='0'인 경우, 즉 유저가 0을 클릭한 경우 firstOperend.textContent==='0'인 상태가 유지되어 0이 아닌 숫자를 먼저 입력해야만 하는 것이다. 따라서 0+1, 0*2 ,..., 등 0으로 시작하는 연산을 할 수 없게 된다.

그러므로 다음과 같이 작성해줘야 한다.

let isFilled=false;
//이하 중략
if(action==='number' && isFilled===false)
{
  firstOperend.textContent = buttonContent;
  isFilled=true;
}
if(action==='number' && isFilled)
{
  secondOperend.textContent = buttonContent;
}
//이하 중략
if(action==='clear')
{//0+0=0의 상태로 초기화시키고, isFilled도 false로 초기화!
  firstOperend.textContent = '0';
  secondOperend.textContent = '0';
  operator.textContent = '+';
  calculatedResult = '0';
  isFilled=false;
}

이 경우, firstOperend.textContent==='0'이라는 조건이 없으므로 0으로 시작하는 연산도 가능해진다.