你好，我刚刚开始使用javascript，我创建了一个运行良好的计算器，除了我遇到了一个让我卡了好几天的错误。我的键盘输入有问题。
首次打开计算器时，键盘输入正常工作，按 Enter 返回正确的答案。但是在单击 AC 按钮后，当您按 Enter 键时，显示屏始终显示 0，即使 displayNumber 变量在控制台记录时显示正确的数字也是如此。
单击回车键而不是按键始终返回正确的答案，之后回车键将正常工作，直到再次单击交流按钮。 仅单击按钮时，一切都可以正常工作。
这是我的代码，我相信问题出在事件侦听器或以下函数之一：
https://jsfiddle.net/novakoda9/q7pcynok/4/
function equalize() {
num1 = Number(previousNumber.slice(0,-2));
num2 = Number(displayNumber);
displayNumber = operate(num1, operator, num2).toString();
previousNumber = '0';
updateDisplay(displayNumber, '');
answered = true;
};
function clear() {
displayNumber = '0';
previousNumber = '0';
operator = '';
answered = false;
updateDisplay(displayNumber, '');
};
function updateDisplay(current, history) {
currentDisplay.innerHTML = current;
if (history !== undefined) {
historyDisplay.innerHTML = history;
}
};
function keyPressed(key) {
if (!isNaN(key) | key === '.') {
numberClicked(key);
} else if (key === '+' | key === '-' | key === '*' | key === '/') {
storeNumber(displayNumber, key);
} else if (key === 'Enter') {
equalize();
} else if (key === 'Backspace') {
displayNumber = '0';
updateDisplay(displayNumber);
};
};
window.addEventListener('keydown', (k) => {
let keyInput = k.key;
let validInput = /^d|.|+|-|*|/|Backspace|Enter/;
if (validInput.test(keyInput)) {
keyPressed(keyInput);
}
});
我真的不确定是导致问题的函数还是事件侦听器。任何帮助将不胜感激！
正如@tractatusviii所说，因为焦点仍然在按钮上，当你按回车键时，它运行与回车键相关的功能和与焦点键相关的功能。当你点击交流键时，焦点仍然在它上面，当你按回车键时，它会在显示中设置最终答案，并且由于焦点在交流键上，你按回车键也调用clear((函数。输出被重置通过清晰的功能。 您可以使用blur((;方法从单击的按钮中删除焦点。
function add(num1, num2) {
return num1 + num2;
};
function subtract(num1, num2) {
return num1 - num2;
};
function multiply(num1, num2) {
return num1 * num2;
};
function divide(num1, num2) {
return num1 / num2;
};
function operate(num1, op, num2) {
let answer = 0;
switch (op) {
case '+':
answer = add(num1, num2);
break;
case '-':
answer = subtract(num1, num2);
break;
case '×':
answer = multiply(num1, num2);
break;
case '*':
answer = multiply(num1, num2);
break;
case '/':
answer = divide(num1, num2);
break;
};
return answer;
};
function numberClicked(number) {
if (displayNumber === '0' || answered === true) {
displayNumber = number.toString();
updateDisplay(displayNumber);
if (answered === true) {answered = false;};
} else {
displayNumber = displayNumber.toString() + number.toString();
updateDisplay(displayNumber);
};
};
function storeNumber(number, op) {
operator = op.toString();
previousNumber = displayNumber.toString() + ' ' + operator;
displayNumber = '0';
updateDisplay(displayNumber, previousNumber);
};
function equalize() {
num1 = Number(previousNumber.slice(0,-2));
num2 = Number(displayNumber);
displayNumber = operate(num1, operator, num2).toString();
previousNumber = '0';
updateDisplay(displayNumber, '');
answered = true;
};
function clear() {
displayNumber = '0';
previousNumber = '0';
operator = '';
answered = false;
updateDisplay(displayNumber, '');
};
function updateDisplay(current, history) {
currentDisplay.innerHTML = current;
if (history !== undefined) {
historyDisplay.innerHTML = history;
}
};
function keyPressed(key) {
if (!isNaN(key) | key === '.') {
numberClicked(key);
} else if (key === '+' | key === '-' | key === '*' | key === '/') {
storeNumber(displayNumber, key);
} else if (key === 'Enter') {
equalize();
} else {
displayNumber = '0';
updateDisplay(displayNumber);
};
};
let displayNumber = '0';
let previousNumber = '0';
let operator = '';
let answered = false;
const numberButtons = document.querySelectorAll('.numberButton');
const operatorButtons = document.querySelectorAll('.operatorButton');
const equalButton = document.querySelector('.equal');
const backButton = document.querySelector('.back');
const clearButton = document.querySelector('.clear');
const currentDisplay = document.getElementById('result');
const historyDisplay = document.getElementById('history');
numberButtons.forEach(button => {
button.addEventListener('click', () => {
numberClicked(button.innerHTML);
});
});
operatorButtons.forEach(button => {
button.addEventListener('click', () => {
storeNumber(displayNumber, button.innerHTML);
});
});
equalButton.addEventListener('click', () => {
equalize();
});
clearButton.addEventListener('click', () => {
clear();
/*move focus*/
clearButton.blur();
});
backButton.addEventListener('click', () => {
displayNumber = '0';
updateDisplay(displayNumber);
});
window.addEventListener('keydown', (k) => {
let keyInput = k.key;
let validInput = /^d|.|+|-|*|/|Backspace|Enter/;
if (validInput.test(keyInput)) {
keyPressed(keyInput);
}
});body {
align-items: center;
text-align: center;
background-color: #900;
}
#calculator {
margin: 3em auto;
display: grid;
grid-auto-rows: minmax(100px, auto);
background: #ddd;
box-shadow: 3px 9px 12px 5px #111;
width: 400px;
height: 600px;
}
.display {
margin: 10px;
border: solid 1px black;
background: white;
display: inline;
font-weight: bold;
position: relative;
}
#history {
font-size: 20px;
color: #888;
position: absolute;
top: 10px;
right: 10px;
text-align: right;
}
#result {
font-size: 30px;
text-align: right;
position: absolute;
bottom: 10px;
right: 10px;
}
#buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(100px, auto);
}
button {
min-height: 5vw;
min-width: 5vw;
padding: 10px;
margin: 10px;
border: 1px solid white;
border-radius: 55px;
font-size: 20px;
font-weight: bolder;
}
.operatorButton {
background: #9F9;
}
.zero {
grid-column: 1/3;
}
.one {
grid-column: 1;
grid-row: 4;
}
.two {
grid-column: 2;
grid-row: 4;
}
.three {
grid-column: 3;
grid-row: 4;
}
.four {
grid-column: 1;
grid-row: 3;
}
.five {
grid-column: 2;
grid-row: 3;
}
.six {
grid-column: 3;
grid-row: 3;
}
.seven {
grid-column: 1;
grid-row: 2;
}
.eight {
grid-column: 2;
grid-row: 2;
}
.nine {
grid-column: 3;
grid-row: 2;
}
.divide {
grid-column: 4;
grid-row: 2;
}
.times {
grid-column: 4;
grid-row: 3;
}
.minus {
grid-column: 4;
grid-row: 5;
}
.add {
grid-column: 4;
grid-row: 4;
}
.equal {
grid-column: 3/5;
grid-row: 1;
background: green;
}
.back {
grid-column: 2;
grid-row: 1;
background: #F99;
}
.clear {
grid-column: 1;
grid-row: 1;
background: red;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title></title>
</head>
<body>
<div id="calculator">
<div class="display">
<div id="history"></div>
<div id="result">0</div>
</div>
<div id="buttons">
<button type="button" class="button clear">AC</button>
<button type="button" class="button back">⌫</button>
<button type="button" class="button equal">=</button>
<button type="button" class="button operatorButton divide">/</button>
<button type="button" class="button operatorButton times">×</button>
<button type="button" class="button operatorButton minus">-</button>
<button type="button" class="button operatorButton add">+</button>
<button type="button" class="button numberButton nine">9</button>
<button type="button" class="button numberButton eight">8</button>
<button type="button" class="button numberButton seven">7</button>
<button type="button" class="button numberButton six">6</button>
<button type="button" class="button numberButton five">5</button>
<button type="button" class="button numberButton four">4</button>
<button type="button" class="button numberButton three">3</button>
<button type="button" class="button numberButton two">2</button>
<button type="button" class="button numberButton one">1</button>
<button type="button" class="button numberButton zero">0</button>
<button type="button" class="button numberButton point">.</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>我认为您在这里的问题可能是，当手动单击数字按钮时，单击后，给定按钮将保持选中状态或"聚焦"，因此劫持了 Enter 键。
将删除焦点添加到您希望用户手动单击的所有按钮，您将变得花花公子！