JS 연습문제 3 - 간이 계산기 ver.3

▶ JS 연습문제 3 - 간이 계산기 ver.3

<h1>간이 계산기 만들기</h1>

첫 번째 값 : <input type="text" id="num1"><br>
두 번째 값 : <input type="text" id="num2"><br>
    
<!-- 
** 함수 호출 시 매개변수 this ** 
-> 이벤트가 발생한 요소 자체를 의미
(여기에서는 클릭된 연산자 버튼)  
-->
<button onclick="calculate(this)">+</button>
<button onclick="calculate(this)">-</button>
<button onclick="calculate(this)">*</button>
<button onclick="calculate(this)">/</button>
<button onclick="calculate(this)">%</button>

<br><br>
계산 결과 : <span id="result"></span>

<script>
   function calculate(btn){
   // btn 에는 this(클릭된 버튼 요소)가 전달되어짐
   
   const op = btn.innerText; // 버튼의 내용(+,-,*,/,%)를 얻어옴

   // input에 입력된 값을 얻어와서 바로 number 타입으로 변환
   const num1 = Number(document.getElementById('num1').value);
   const num2 = Number(document.getElementById('num2').value);

   // 결과 저장용 변수
   let result = 0;

   switch(op){
     case '+' : result = num1 + num2; break;
     case '-' : result = num1 - num2; break;
     case '*' : result = num1 * num2; break;
     case '/' : result = num1 / num2; break;
     case '%' : result = num1 % num2; break;
   }

   // span 태그에 결과 출력
   document.getElementById('result').innerHTML = result;
   }
</script>

See the Pen 24-12-25 js review-pr3 by Namu (@Namu-the-sans) on CodePen.