[JavaScript] 간이 계산기 만들기

* 무난하게 성공했다...ㅠ... 이 로직을 까먹지 않기 위해 포스팅을 작성하였음

 

나의 로직 

1. 계산기 => switch문을 활용한다

2. 인라인 이벤트 방식을 사용하여 this를 전달한다. 이때 this는 버튼 요소 객체이다.

3.javascript단으로 넘어와서 버튼 이벤트 클릭시 호출 될 calculator함수 안에 매개변수를 세팅한다

(이때 매개변수명은 임의로 지어도 무방하다)

4.console.log(매개변수명)으로 전달 받은 값들이 잘 찍히는 지 확인하기 -> 생략가능 

5. 결과값을 담을 변수 result를 선언한다.

6..입력된 값들을 div단에 뿌려줘야 하니까 area 변수에 div 요소 객체를 담는다 ( 아이디가 area1인 )

7.스위치 문을 사용해서 ( 이때 매개변수는 e로 한다. 왜? console.log(e)로 찍어보면 연산자가 입력되기 때문이다. )

input 요소에 있는 값들을 형변환 한다. ( 왜? input 요소에 입력된 값들은 자동으로 toString으로 문자열로 변환이 된다. 하지만, 우리는 연산을 해야하기 때문에, Number로 강제 형변환을 해야한다 ). 

8. 그리고 결과값이 담긴 result 변수를 area.innerHTML로 div단에 뿌려준다.

 

전체 코드

   <h1>간이 계산기 만들기 </h1>
    첫번째 값 : <input type="number" id="a"> <br>
    두번째 값 : <input type="number" id="b"> <br>

    <input type="button" value="+" id="=" onclick="calculator(this.value);">
    <input type="button" value="-" id="-" onclick="calculator(this.value);">
    <input type="button" value="x" id="x" onclick="calculator(this.value);">
    <input type="button" value="/" id="/" onclick="calculator(this.value);">
    <input type="button" value="%" id="%" onclick="calculator(this.value);">

    <br><br>

   
    <div class="area" id="area1"> 계산결과 : </div>


    <script>
        function calculator(e){

            console.log(e);
            var result = "";
            var area = document.getElementById("area1")

            switch(e){
                case '+' : result = Number(a.value) + Number(b.value) ;break;
                case '-' : result = Number(a.value) - Number(b.value) ;break;
                case 'x' : result = Number(a.value) * Number(b.value) ;break;
                case '/' : result = Number(a.value) / Number(b.value) ;break;
                case '%' : result = Number(a.value) % Number(b.value) ;break;
                
            }

            area.innerHTML = result;
            

        }
    </script>

 

---

모범답안

코드도 미니멀라이프..ㅎ

*변수명은 상이할 수 있음

 

1) switch문 이전에 사용자에게서 입력 받은 값들을 형변환을 한다.

2) result = 0;으로 설정한다

3) 결과값이  result을  document.getElementById(아이디).innerHTML에 대입한다.

	<script>
    	function calculator(val){

        	var su1 = Number(document.getElementById("num1").value);
        	var su2 = Number(document.getElementById("num2").value);
			
        	var result = 0;

			switch(val){
				case "+": result = su1+su2; break;
				case "-": result = su1-su2; break;
				case "x": result = su1*su2; break;
				case "/": result = su1/su2; break;
				case "%": result = su1%su2; break;
			}
        	
        	document.getElementById("calc").innerHTML = result;
            
    	}
	</script>

 

내 코드에 적용하기 

    <script>
        function calculator(e){


            var a = Number(document.getElementById("a").value);
            var b = Number(document.getElementById("b").value);
            var result = 0;
            

            switch(e){
                case '+' : result = a+b;break;
                case '-' : result = a-b ;break;
                case 'x' : result = a*b ;break;
                case '/' : result = a/b ;break;
                case '%' : result = a%b ;break;
                
            }

            document.getElementById("area1").innerHTML = result;

            

        }
    </script>