카테고리

질문 & 답변
세부 분야

프로그래밍 언어
해결 여부

미해결

샘이랑 똑같이쳣는데 왜 입력이 안될가여

23.11.26 19:49 작성 23.11.26 19:59 수정 조회수 192

함수도 호출햇고 리턴값을 함수로호출햇는데 왜 샘이 랑 똑같이 쳣는지 버튼을 눌러도 숫자가 입력이 안되나여

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>계산기</title>
  <style>
    * { 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 }
  </style>
</head>

<!-- 계산기 버튼 구현 -->
<body>
  
  <head>
    <meta charset="utf-8">
    <title>계산기</title>
    <style>
      * { 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 }
    </style>
  </head>
  
  <!-- 계산기 버튼 구현 -->
  <body>
    <input  readonly id="operator">
    <input readonly type="number" id="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>
    
    let numOne='';
    let operator='';
    let numTwo='';
  
    // 이두개가 왜쓰엿는지는 강의를 들으면서 알아보자 
  
    const $operator =document.querySelector('#operator');
    const $result = document.querySelector('#result');
  
  
   // 중복울 제거 햇기떄문에 변수로 넣어줌 
  
    const onClickNumber =
  
    (number) => 
  
  
       
  
    //   if(operator){
  
    //      numberTwo +=number;
  
         
        
      
    //   }
  
    //   else{
  
    //      numberOne += number;
  
         
        
  
    //   }
  
  
    // $result.value+=number;
    //return undefined; 
  
    /// 반환하니 반환 할놈이 없으니 나오지도 않는다 
   // 그래서 언디 파인드를 넣지말고 함수를 넣어야 한다 
  
   //함수를 리턴해주는거다 
   // 실행되는것을 함수안으러 넣어주어야 한다 
  
  
  
    (event) => {
  
  
  
  
      
      if(operator){
  
  numberTwo +=number;
  
  
  
  
  }
  
  else{
  
  numberOne += number;
  
  
  
  
  }
  
  
  $result.value += number;
       
  
  
  
  
  
    };
    
  
    
  
  
  
  
  
  
  // 넘버1 에 클릭이벤트 가 발생햇을떄 함수 실행한다 
  
  
  //$input.addEventListener('input',writing);  
  
  //   인풋 이벤트가 발생되면 안에 함수를 넣는다  
  // 넘버 0 인   아이디를 선택하고  클릭이벤트 발생햇을떄 이벤트 리스너를 
  // 추가한다  
  
  
  //  함수에서 중복이 발생하면 다른 부분들을 매개변수로 뺴라
  
  
  
  
  document.querySelector('#num-0') .addEventListener('click', onClickNumber('0'));
  document.querySelector('#num-1') .addEventListener('click', onClickNumber('1'));
  document.querySelector('#num-2') .addEventListener('click', onClickNumber('2'));
  document.querySelector('#num-3') .addEventListener('click', onClickNumber('3'));
  document.querySelector('#num-4') .addEventListener('click', onClickNumber('4'));
  document.querySelector('#num-5') .addEventListener('click', onClickNumber('5'));
  document.querySelector('#num-6') .addEventListener('click', onClickNumber('6'));
  document.querySelector('#num-7') .addEventListener('click', onClickNumber('7'));
  document.querySelector('#num-8') .addEventListener('click', onClickNumber('8'));
  document.querySelector('#num-9') .addEventListener('click', onClickNumber('9'));
  
    // 이런식으로 함수의 중복이 발생이되엇을떄 중복을 함수로 뺴서  중복을 피해라;
  
  
  
  
  
  
  
  
    document.querySelector('#plus') .addEventListener('click', () => {} );
    document.querySelector('#minus') .addEventListener('click', () => {} );
    document.querySelector('#divide') .addEventListener('click', () => {} );
    document.querySelector('#num-1') .addEventListener('click', () => {} );
    document.querySelector('#multiply') .addEventListener('click', () => {} );
    document.querySelector('#calculate') .addEventListener('click', () => {} );
    document.querySelector('#clear') .addEventListener('click', () => {} );
    
  
  
  
  
  
  </script>
  </body>
  </html>