계산기 제작 시 체크 포인트
- input 태그 활용해 값을 받아옴
- 입력한 값은 글자로 인식되므로, 이를 숫자로 인식되도록 해야함
입력할 input 태그를 불러오고, 이를 숫자 형식으로 변환함.
let noX1 = document.querySelector("#no-x1");
첫번째 방법 : let x = parseInt(noX1.value);
두번째 방법 : let x = Number(noX1.value);
세번째 방법 : let x = +(noX1.value);
- 사칙연산을 하기 위해 4개의 연산자를 옵션으로 배치함
더하기 빼기 곱하기 나누기
select
option value="plus" 더하기
option value="minus" 빼기
option value="multi" 곱하기
option value="sub" 나누기
- 옵션 불러오기 및 활용 시 배열처럼 사용함
옵션을 불러오면 배열처럼 들어옴
let option = document.querySelectorAll("option");
console.log(option);으로 체크하면,
NodeList(4) [option, option, option, option]
0: option
1: option
2: option
3: option
length: 4
따라서 이를 switch문이나 if문을 사용해 선택된 옵션만 실행되도록 함.
가장 대중적인 if문을 활용하면,
if(option[0].selected) {
noSum.value = x1+y1;
} else if(option[1].selected) {
noSum.value = x1-y1;
} else if(option[2].selected) {
noSum.value = x1*y1;
} else if(option[3].selected) {
noSum.value = x1/y1;
}
완성 코드 확인하기
let noX1 = document.querySelector("#no-x1");
let noY1 = document.querySelector("#no-y1");
let btn1 = document.querySelector("#btn1");
let noSum = document.querySelector("#no-sum");
let reset = document.querySelector("#reset");
btn1.addEventListener('click', function(){
let x1 = +(noX1.value);
let y1 = +(noY1.value);
let option = document.querySelectorAll("option");
if(option[0].selected) {
noSum.value = x1+y1;
} else if(option[1].selected) {
noSum.value = x1-y1;
} else if(option[2].selected) {
noSum.value = x1*y1;
} else if(option[3].selected) {
noSum.value = x1/y1;
}
});