728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<title>계산기</title>
<meta charset="UTF-8">
<meta http-equiv="x-uv-compatible">
</head>
<style>
</style>
<body>
<!--
1. input 요소의 값을 가져오기 위해서는 우선 input/Select요소를 선택한 뒤 value 속성을 받아오면 됨
2. input/Select 요소의 value 속성 값은 문자열이며 이를 숫자로 변환하기 위해서는 parseInt 함수를 이용한다.
가령,
let input = window.document.body.querySelector('input');
let value - input.valur;
에서 value 는 문자열이며 이를 숫자로 바꾸기 위해서는 아래와 같이 한다.
let value = parseInt(input.value);
-->
<input type="number" value="0">
<select>
<!-- 현재 상태에서 해당 Select요소의 value를 가져오면 'plus' 가 반환된다. 즉, 선택된 option 요소의 value를 반환함-->
<option selected value="plus">+</option>
<option value="minus">-</option>
<option value="multiply">*</option>
<option value="divide">/</option>
<option value="remain">%</option>
<option value="times">**</option>
</select>
<input type="number" value="0">
<input type="button" value="계산">
<span>
<span>결과 : </span>
<span>0</span>
</span>
<script>
// 첫 번쨰 numbert input 가져오기 : window.document.body.querySelector('input[type=number]:nth-of-type(1)');
// 두 번쨰 numbert input 가져오기 : window.document.body.querySelector('input[type=number]:nth-of-type(2)');
// 기호 select 가져오기 : window.document.body.querySelector('select')
// 버튼 input 가져오기 : window.document.body.querySelector('input[type=button]')
// 결과 span 가져오기 : window.document.body.querySelector(':scope > span > span:nth-child(2)')
// 모든 사건은 버튼 input을 click했을 때 발생한다는 점에 집중하기
// 진짜 정 안되면 id 줘서라도 해보기
let button = window.document.body.querySelector('input[type=button]')
button.addEventListener('click', () => {
let firstNumberInput1 = window.document.body.querySelector('input[type=number]:nth-of-type(1)');
let firstNumberInput2 = window.document.body.querySelector('input[type=number]:nth-of-type(2)');
let firstNumber1 = parseInt(firstNumberInput1.value);
let firstNumber2 = parseInt(firstNumberInput2.value);
let signSelect = window.document.body.querySelector('select');
let result;
switch (signSelect.value) {
case 'plus': buttonresult = firstNumberInput1 + firstNumber2;
break;
case 'minus': buttonresult = firstNumberInput1 - firstNumber2;
break;
case 'multiply': buttonresult = firstNumberInput1 * firstNumber2;
break;
case 'divide': buttonresult = firstNumberInput1 / firstNumber2;
break;
case 'remain': buttonresult = firstNumberInput1 % firstNumber2;
break;
case 'times': buttonresult = firstNumberInput1 ** firstNumber2;
break;
}
let span = window.document.body.querySelector(':scope > span > span:nth-child(2)');
span.innerText = result;
});
</script>
</body>
</html>
728x90
반응형