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

Question

您好，我刚刚开始使用 javascript，并且我创建了一个运行良好的计算器，但我遇到了一个让我卡住了好几天的错误。我的键盘输入有问题。

第一次打开计算器时，键盘输入正常，按回车键返回正确答案。但是在单击 AC 按钮后，当您按 enter 键时，显示始终显示 0，即使 displayNumber 变量在我控制台记录它时显示正确的数字。

单击 enter 按钮而不是按下键总是会返回正确的答案，然后 enter 键会正常工作，直到再次单击 AC 按钮。 仅单击按钮时，一切正常。

这是我的代码，我认为问题出在事件侦听器或以下函数之一：

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

我真的不确定它是导致问题的函数还是事件侦听器。任何帮助将不胜感激！

Answer 1

正如@tractatusviii 所说，因为焦点仍然在按钮上，因此当您按下回车键时，它会运行与回车键相关的功能和与聚焦键相关的功能。当您点击 AC关键焦点仍然在它上面，当您按 Enter 键时，它会在显示中设置最终答案，并且由于焦点在 AC 键上并且您按 Enter 键，它也会调用 clear() 函数。并且输出由 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>

Answer 2

我认为您的问题可能是手动单击数字按钮时，单击后，给定按钮保持选中状态或“焦点”，因此劫持了 Enter 键。

将焦点添加到您希望用户手动单击的所有按钮上，您会很漂亮！