Всем привет, недавно начал делать свой первый калькулятор HTML+CSS+JS
Сделал его, но его нужно изменить
1.querySelector('.screen p') заменить на что-то более осознанное, в один селектор
2.event функции нужно разбить на несколько частей, например, одна отвечает за обработку нажатий на цифры, а другая за обработку нажатий на мат.операции. А в event-е просто вызывать их в зависимости от того, что сейчас нажато
Нужна помощь в изменении кода
Вот сам JS код
let a = '';
let b = '';
let sign = '';
let finish = false;
const digit = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.'];
const action = ['-', '+', 'X', '÷'];
const out = document.querySelector('.screen p');
function clearAll () {
a = '';
b = '';
sign = '';
finish = false;
out.textContent = 0;
}
document.querySelector('.ac').onclick = clearAll;
document.querySelector('.buttons').onclick = (event) => {
if(!event.target.classList.contains('knop')) return;
if(event.target.classList.contains('ac')) return;
out.textContent = '';
const key = event.target.textContent;
if (digit.includes(key)) {
if (b ==='' && sign === '') {
a += key;
out.textContent = a;
}
else if (a!=='' && b!=='' && finish) {
b = key;
finish = false;
out.textContent = b;
}
else {
b += key;
out.textContent = b;
}
console.table(a, b , sign);
return;
}
if (action.includes(key)) {
sign = key;
out.textContent = sign;
console.table(a, b , sign);
return;
}
if (key === '=') {
if (b ==='') b = a;
switch (sign) {
case "+":
a = (+a) + (+b);
break;
case "-":
a = a - b;
break;
case "X":
a = a * b;
break;
case "÷":
if (b === '0') {
out.textContent = 'Разделить на ноль нельзя';
a = '';
b = '';
sign = '';
return;
}
a = a / b;
break;
}
finish = true;
out.textContent = a;
console.table(a, b , sign);
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Калькулятор</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="index.js" defer> </script>
<div class="cal">
<div class="screen">
<p>0</p>
</div>
<div class="buttons">
<div class="knop ac pink">AC</div>
<div class="knop delete pink"><</div>
<div class="knop percent pink">%</div>
<div class="knop division pink">÷</div>
<div class="knop one">1</div>
<div class="knop two">2</div>
<div class="knop three">3</div>
<div class="knop X pink">X</div>
<div class="knop four">4</div>
<div class="knop five">5</div>
<div class="knop six">6</div>
<div class="knop minus pink">-</div>
<div class="knop seven">7</div>
<div class="knop eight">8</div>
<div class="knop nine">9</div>
<div class="knop plus pink">+</div>
<div class="knop zero">0</div>
<div class="knop dot">.</div>
<div class="knop equals pink">=</div>
</div>
</div>
</body>
</html>