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

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

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

첫 번째 값 : <input type="text" id="num1"><br>
두 번째 값 : <input type="text" id="num2"><br>
    
<button onclick="calPlus()">+</button>
<button onclick="calMinus()">-</button>
<button onclick="calMulti()">*</button>
<button onclick="calDiv()">/</button>
<button onclick="calRemain()">%</button>


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

<script>
  const num1 = document.getElementById('num1');
        
  // const num1 = Number(document.getElementById('num1').value);
  // console.log(num1); : 어떠한 값도 입력되지 않은 상태(초기값 == 0)가 num1 변수에 저장된 상태

  const num2 = document.getElementById('num2');

  const result = document.getElementById('result');

  // Number(문자열) : 문자열을 number 타입으로 변환
  // Nan(Not a Number) : 숫자가 아닌 값
  function calPlus(){result.innerHTML = Number(num1.value) + Number(num2.value);}

  function calMinus(){result.innerHTML = Number(num1.value) - Number(num2.value);}

  function calMulti(){result.innerHTML = Number(num1.value) * Number(num2.value);}

  function calDiv(){result.innerHTML = Number(num1.value) / Number(num2.value);}

  function calRemain(){result.innerHTML = Number(num1.value) % Number(num2.value);}
</script>

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