$$config title: [코드펜] 리액트 없이 사칙연산 로직 만드는 방법 및 설명 keywords: - 리액트 없이 실행 $$ # [리액트 없이 사칙연산 로직 만드는 방법 및 설명](https://codepen.io/SeonHo-/pen/poaPrVR?editors=1010) ## HTML 코드 및 설명 ```html [html] 코드

계산결과는 ? 입니다.

``` ### 설명 1 . ```html ``` 1. input -> 내용을 입력할 수 있는 네모칸이 생김 2. type -> type에 "number"을 넣음으로서 네모칸 안에 숫자가 입력될수 있도록함 3. style -> 네모칸의 길이를 지정 4. value -> 네모칸 안에 들어가는 숫자의 기본값을 설정 5. min/max -> 네모칸 안에 들어가는 숫자의 크기를 지정 2 . ```html ``` 1. select -> 옵션을 만들수 있도록하는 것 2. option -> 옵션칸 안에 들어갈 내용 3 . ```html ``` 1. button -> 버튼이 만들어짐 4 . ```html

```

1. div -> 결과 실행 ------------------------- ## JS 코드 및 설명 ```js [자바스크립트 ] console.clear(); const btnCalc = document.querySelector("#btn-calc"); function calculate() { const inputNum1 = document.querySelector("#num1"); const inputNum2 = document.querySelector("#num2"); const num1 = inputNum1.valueAsNumber; const num2 = inputNum2.valueAsNumber; const inputOp = document.querySelector("#op"); let rs = 0; if (inputOp.value == 0) { rs = num1 + num2; } else if (inputOp.value == 1) { rs = num1 - num2; } else if (inputOp.value == 2) { rs = num1 * num2; } else if (inputOp.value == 2) { rs = num1 / num2; } else { rs = num1 ** num2; } const divRs = document.querySelector("#rs"); const divRs2 = document.querySelector("#rs2"); divRs.innerText = rs; divRs2.innerText = rs; } btnCalc.onclick = calculate; ``` ### 설명 - 이름이 있으면 가져온다.(#이름) 1 . ```js btnCalc.onclick = calculate; ``` 1. onclick -> 클릭했을때 2. calculate -> 함수명 / 여기선 예약 느낌 3. 한줄 요약 : btnCalc를 클릭할때마다 calculate 함수 실행해라 2 . ```js const btnCalc = document.querySelector("#btn-calc");``` 1. #btn-calc -> 아이디가 btn-calc인 엘리먼트 (여기서 말하는 아이디는 html에서 설정한 아이디) 2. document -> 문서, html 같은거 관리하는 문서 3. querySelector -> 검색 4. 한줄 요약 : html 문서에서 아이디가 btn-calc인 엘리먼트를 검색한다. / 검색한 내용을 btnCalc에 넣는다.! 3 . ```js const num1 = inputNum1.valueAsNumber; ``` 1. inputNum1.valueAsNumber -> inputNum1이 가지고 있는 값을 숫자형식으로 가져온다. 4 .```js divRs.innerText = rs; ``` 1. innerText -> html 태그를 변경하고 텍스트를 넣는다.