<div class="number">
<input readonly class="change"> <input readonly class="resul">
<div><button class="number_7">7</button><button class="number_8">8</button><button class="number_9">9</button><button class="minus">+</button></div>
<div><button class="number_4">4</button><button class="number_5">5</button><button class="number_6">6</button><button class="divide">-</button></div>
<div><button class="number_1">1</button><button class="number_2">2</button><button class="number_3">3</button><button class="multiply">*</button></div>
<div><button class="number_c">C</button><button class="number_0">0</button><button class="resull">=</button><button class="calculate">/</button></div>
</div>
<script>
let $resul = document.querySelector('.resul')
let $change = document.querySelector('.change')
let one = ""
let two = ""
let operator = ""
let onClick = (number) => {
return () => {
if (!$change.value){
$resul.value += number;
one = $resul.value;
}
else {
$resul.value += number;
two = $resul.value;
}
}
}
let onClickOperator = (op) => {
return () => {
if(one){
$change.value = op;
$resul.value = "";
}
else{
alert('숫자를 입력하세요')
}
}
}
let onClickResul = () => {
if(two){
switch ($change.value) {
case '+':
$resul.value = parseInt(one) + parseInt(two);
$change.value = ''
one = $resul.value
break;
case '-':
$resul.value = one - two;
$change.value = '';
one = $resul.value
break;
case '*':
$resul.value = one * two;
$change.value = '';
one = $resul.value
break;
case '/':
$resul.value = one / two;
$change.value = '';
one = $resul.value
break;
}
}
else{
alert('숫자를 입력하세요')
}
}
document.querySelector('.number_0').addEventListener('click',onClick('0'))
document.querySelector('.number_1').addEventListener('click',onClick('1'))
document.querySelector('.number_2').addEventListener('click',onClick('2'))
document.querySelector('.number_3').addEventListener('click',onClick('3'))
document.querySelector('.number_4').addEventListener('click',onClick('4'))
document.querySelector('.number_5').addEventListener('click',onClick('5'))
document.querySelector('.number_6').addEventListener('click',onClick('6'))
document.querySelector('.number_7').addEventListener('click',onClick('7'))
document.querySelector('.number_8').addEventListener('click',onClick('8'))
document.querySelector('.number_9').addEventListener('click',onClick('9'))
document.querySelector('.number_c').addEventListener('click', () => {
one = ""
two = ""
$change.value = ""
$resul.value = ""
})
document.querySelector('.minus').addEventListener('click',onClickOperator('+'))
document.querySelector('.divide').addEventListener('click',onClickOperator('-'))
document.querySelector('.multiply').addEventListener('click',onClickOperator('*'))
document.querySelector('.calculate').addEventListener('click',onClickOperator('/'))
document.querySelector('.resull').addEventListener('click',onClickResul)
</script>
참고자료
https://www.youtube.com/watch?v=F5nlnM6Z9Vo&list=PLcqDmjxt30RvEEN6eUCcSrrH-hKjCT4wt&index=42