[코풀수: 기본] 계산기 #2

날짜:
앞선 글의 계산기 #1 는 매우 단순하여 계산기라고 말하기도 민망하다. 하지만 웹브라우져 상에서 두개의 숫자를 입력받아 곱하기 버튼을 누르면 곱한 값을 훌륭하게 출력해 준다. 이제 하나씩 기능을 덧붙여 가보자.

가장 먼저 곱하기만이 아닌 사칙연산(더하기, 빼기, 더하기, 나누기)을 추가 해보자.

계산기 #2

a:



b:



답:


계산기 업그레이드


<!DOCTYPE html>
<html>
<title>계산기 #2</title>
<body>

<h4>계산기 #2</h4>

<form>
  a: <input type="text" id="a" value="3"><br>
  <select id="operator">
    <option value="plus">더하기</option>
    <option value="minus">빼기</option>
    <option value="multiply" selected>곱하기</option>
    <option value="divide">나누기</option>
  </select><br>
  b: <input type="text" id="b" value ="4"><br>
  <input type="button" id="operation" value="계산하기"><br>
</form>

<p id="result">답: </p>

<script>
    document.getElementById("operation").addEventListener("click", calc);
    
    function calc() {
        a = Number(document.getElementById("a").value);
        b = Number(document.getElementById("b").value);

        opr = document.getElementById("operator").value;

        if (opr == "plus") text = a + b;
        else if (opr == "minus") text = a - b;
        else if (opr == "multiply") text = a * b;
        else text = a / b;

        document.getElementById("result").innerHTML = "답: " + text;
    }
</script>

</body>
</html>

기존과 차이점은 다음과 같다.

  1. 폼(form)에 select를 추가하고 4개의 선택 옵션(operator)을 넣고,
  2. 스크립트(script)에서 operator값을 받아서 그 값에 따라 연산을 수행하고,
  3. 입력된 a와 b값을 확실하게 숫자로 인식시키기 위해 Number라는 함수를 추가했다.

[코드설명] if (opr == "plus") {}은 ()안의 내용이 참이면 {}안의 내용을 실행시키라는 조건문이다.

사칙연산이 되니 이제 좀 그럴싸한 계산기가 되었다.

댓글

댓글 쓰기