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

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

첫 번째 값 : <input type="text" id="num1"><br>
두 번째 값 : <input type="text" id="num2"><br>
    
<button onclick="calculate('+')">+</button>
<button onclick="calculate('-')">-</button>
<button onclick="calculate('*')">*</button>
<button onclick="calculate('/')">/</button>
<button onclick="calculate('%')">%</button>

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

<script>
function calculate(op){
   
   // op 에는 +, -, *, /, % 중 하나가 전달되어짐

   // input에 입력된 값을 얻어와서 바로 number 타입으로 변환 (ver.1에선 코드 실행 순서로 불가능)
   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-pr2 by Namu (@Namu-the-sans) on CodePen.