Я делаю простой калькулятор.
Я добавил прослушиватель событий и console.info()
, чтобы распечатать свое событие и посмотреть, что произойдет, но я заметил, что оно срабатывает только тогда, когда я снова нажимаю на калькулятор.
// stores the results of the equations
let runningTotal = 0;
// displays it's value on the screen
let buffer = "0";
// stores the last inputed operator (+,-,*,/)
let previousOperator;
const screen = document.querySelector('.screen');
function inputKeys(value){
if (isNaN(value)){
handleSymbol(value);
} else {
handleNumber(value);
}
screen.innerText = buffer;
}
function handleSymbol(symbol){
switch (symbol) {
case 'C':
buffer = '0';
runningTotal = 0;
break;
case '=':
if (previousOperator === null) return;
flushOperation(parseFloat(buffer));
previousOperator = null;
buffer = runningTotal;
runningTotal = 0;
break;
case '←':
if (buffer.length === 1)
buffer = '0';
else
buffer = buffer.toString(0, buffer.length - 1)
break;
case '+':
case '−':
case '×':
case '÷':
handleMath(symbol);
break;
case '.':
handleDecimal(symbol);
break;
}
}
function handleNumber(numberString){
if (buffer === "0"){
buffer = numberString;
} else {
buffer += numberString;
}
}
function handleDecimal(symbol) {
if (!buffer.includes(symbol)){
buffer += symbol;
} else {
return;
}
}
function handleMath(symbol){
if (buffer === '0') return;
const floatBuffer = parseFloat(buffer);
if (runningTotal === 0){
runningTotal = floatBuffer;
} else {
flushOperation(floatBuffer);
}
previousOperator = symbol;
buffer = '0';
}
function flushOperation(floatBuffer) {
if (previousOperator === '+'){
runningTotal += floatBuffer;
} else if (previousOperator === '−'){
runningTotal -= floatBuffer;
} else if (previousOperator === '×'){
runningTotal *= floatBuffer;
} else if (previousOperator === '÷'){
runningTotal /= floatBuffer;
}
}
function init(){
document.querySelector('.calc-buttons').addEventListener('keydown', function (event) {
console.info(event);
})
document.querySelector('.calc-buttons').addEventListener('click', function (event) {
inputKeys(event.target.innerText);
})
}
init();
<div class = "wrapper">
<section class = "screen">0</section>
<section class = "calc-buttons">
<div class=calc-button-row>
<button class = "calc-button double">
C
</button>
<button class = "calc-button">
←
</button>
<button class = " calc-button">
÷
</button>
</div>
<div class = "calc-button-row">
<button class = "calc-button">
7
</button>
<button class = "calc-button">
8
</button>
<button class = "calc-button">
9
</button>
<button class = "calc-button">
×
</button>
</div>
<div class = "calc-button-row">
<button class = "calc-button">
4
</button>
<button class = "calc-button">
5
</button>
<button class = "calc-button">
6
</button>
<button class = "calc-button">
−
</button>
</div>
<div class = "calc-button-row">
<button class = "calc-button">
1
</button>
<button class = "calc-button">
2
</button>
<button class = "calc-button">
3
</button>
<button class = "calc-button">
+
</button>
</div>
<div class = "calc-button-row">
<button class = "calc-button double">
0
</button>
<button class = "calc-button">
.
</button>
<button class = "calc-button">
=
</button>
</div>
</section>
</div>
Обновлено: только что заметил, что мой «кейс» ← тоже не работает.
Извините, я редактировал сценарий @PaulProgrammer. Должно быть сделано сейчас.
Вы добавляете слушателя keydown
на калькулятор. Вот почему вы должны сначала нажать на калькулятор, прежде чем использовать ввод с клавиатуры. Сначала вы должны сосредоточиться на элементе.
Вместо этого добавьте прослушиватель keydown
в document
. Вот пример:
let runningTotal = 0; //stores the results of the equations
let buffer = "0"; //displays it's value on the screen
let previousOperator; //stores the last inputed operator (+,-,*,/)
const screen = document.querySelector('.screen');
function inputKeys(value) {
if (isNaN(value))
handleSymbol(value);
else
handleNumber(value);
screen.innerText = buffer;
}
function handleSymbol(symbol) {
switch (symbol) {
case 'C':
buffer = '0';
runningTotal = 0;
break;
case '=':
if (previousOperator === null) {
return
}
flushOperation(parseFloat(buffer));
previousOperator = null;
buffer = runningTotal;
runningTotal = 0;
break;
case '←':
if (buffer.length === 1)
buffer = '0';
else
buffer = buffer.toString(0, buffer.length - 1)
break;
case '+':
case '−':
case '×':
case '÷':
handleMath(symbol);
break;
case '.':
handleDecimal(symbol);
break;
}
}
function handleNumber(numberString) {
if (buffer === "0") {
buffer = numberString;
} else {
buffer += numberString;
}
}
function handleDecimal(symbol) {
if (!buffer.includes(symbol)) {
buffer += symbol;
} else {
return;
}
}
function handleMath(symbol) {
if (buffer === '0') {
return;
}
const floatBuffer = parseFloat(buffer);
if (runningTotal === 0) {
runningTotal = floatBuffer;
} else {
flushOperation(floatBuffer);
}
previousOperator = symbol;
buffer = '0';
}
function flushOperation(floatBuffer) {
if (previousOperator === '+') {
runningTotal += floatBuffer;
} else if (previousOperator === '−') {
runningTotal -= floatBuffer;
} else if (previousOperator === '×') {
runningTotal *= floatBuffer;
} else if (previousOperator === '÷') {
runningTotal /= floatBuffer;
}
}
function init() {
document.addEventListener('keydown', function(event) {
inputKeys(event.key)
})
document.querySelector('.calc-buttons').addEventListener('click', function(event) {
inputKeys(event.target.innerText);
})
}
init();
<!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">
<link rel = "stylesheet" href = "style.css">
<title>CALCULADORA DO NUNES</title>
</head>
<body>
<div class = "wrapper">
<section class = "screen">0</section>
<section class = "calc-buttons">
<div class=calc-button-row>
<button class = "calc-button double">
C
</button>
<button class = "calc-button">
←
</button>
<button class = " calc-button">
÷
</button>
</div>
<div class = "calc-button-row">
<button class = "calc-button">
7
</button>
<button class = "calc-button">
8
</button>
<button class = "calc-button">
9
</button>
<button class = "calc-button">
×
</button>
</div>
<div class = "calc-button-row">
<button class = "calc-button">
4
</button>
<button class = "calc-button">
5
</button>
<button class = "calc-button">
6
</button>
<button class = "calc-button">
−
</button>
</div>
<div class = "calc-button-row">
<button class = "calc-button">
1
</button>
<button class = "calc-button">
2
</button>
<button class = "calc-button">
3
</button>
<button class = "calc-button">
+
</button>
</div>
<div class = "calc-button-row">
<button class = "calc-button double">
0
</button>
<button class = "calc-button">
.
</button>
<button class = "calc-button">
=
</button>
</div>
</section>
</div>
<script src = "script.js"></script>
</body>
</html>
Это первая подсказка для вас. Попробуйте использовать slice
вместо case '←'
. Просто console.info(buffer);
перед нарезкой и после, чтобы проверить результат.
Не могли бы вы добавить свой script.js, чтобы мы могли видеть, как вы добавляете обработчики событий?