Изменение в калькуляторе
Всем привет, недавно начал делать свой первый калькулятор 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> |
Цитата:
Цитата:
Цитата:
|
Часовой пояс GMT +3, время: 10:21. |