按清除按钮后计算器键盘输入显示混乱

Question

Hello I'm just getting started with javascript and I've created a calculator which is running excellent except I have run into a bug that has had me stuck for days. I have an issue with the keyboard input.

When first opening the calculator, the keyboard input works as it should and pressing enter returns the proper answer. But after the AC button is clicked, when you press the enter key, the display always shows 0, even though the displayNumber variable shows the proper number when I console log it.

Clicking the enter button instead of pressing the key always returns the proper answer, and after that the enter key works as it should until the AC button is clicked again. When only clicking the buttons, everything works as it should.

Here's my code, I believe the problem is in the event listener or one of these functions:

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);
  }
});

I'm really not sure if its a function causing the issue or the event listener. Any help would be greatly appreciated!

Answer 1

I think your problem here might be that when manually clicking the number buttons, after a click, the given button remains selected or "in-focus" therefore hijacking the Enter key.

Add remove focus to all the buttons that you intend the user to click manually and you'll be dandy!

Answer 2

AS said by the @tractatusviii because of the focus is remains on the button therefor when you press enter key it run function related with enter key and function related with focused key.when you click on AC key focus is remains on it and when you press enter it set the final answer in display and because of focus on AC key and you press enter it also call clear() function.and out put is reset by clear function. you can use blur(); method to remove focus from clicked button.

 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>