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
クリックしたボタンが「数値」で、クリック前の入力値がない場合はfirstOpenRendにクリック値を指定し、isFiledにtrueを再割り当てします.
if(action==='number' && firstOperend.textContent==='0'){
  firstOperend.textContent = buttonContent;
}
if(action==='number' && firstOperend.textContent!=='0'){
  secondOperend.textContent = buttonContent;
}
isFiledを宣言しない場合は、上記のようにfirstOpenrendが使用されます.条件をtextContent===="0"で割った場合、どのような問題が発生しますか?
buttonContent=="0"の場合、ユーザーが0をクリックするとfirstOpenrendになります.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;
}
この場合、firstOpenRend.textContent=="0"の条件がないため,0で始まる演算も可能となる.