为什么计算器不正常？

Question

我正在尝试用香草JS制作我的第一个计算器。我的逻辑如下。

• 您点击数字（1/2）
• 你击中了一个标志（加号/减号）
• 点击第二个号码
• 你达到平等并得到答案。

我的等于按钮通过加号和减号获得不同的功能。但是，它无法正常工作。 1 - 2 = -1但是当您执行+2时，它会-3而不是1。

有什么问题？

var screen = document.getElementById('hres');
var numI = 0;
var numII = 0;

document.getElementById('one').addEventListener("click", uno);

function uno() {
  screen.value = 1;
}

document.getElementById('two').addEventListener("click", duo);

function duo() {
  screen.value = 2;
}

function plus() {
  numI = screen.value;
  document.getElementById('eql').addEventListener('click', equalP);
}

function equalP() {
  numII = screen.value;
  screen.value = +numI + +numII;
}

function minus() {
  numI = screen.value;
  document.getElementById('eql').addEventListener('click', equalM);
}

function equalM() {
  numII = screen.value;
  screen.value = numI - numII;
}

#hres {
  position: relative;
  text-align: center;
  line-height: 50px;
  font-size: 22pt;
  width: 200px;
  height: 50px;
  margin-bottom: 65px;
}

#sum {
  display: inline-block;
  font-size: 20pt;
  border: 2px solid black;
  margin: 5px;
  text-align: center;
  line-height: 50px;
  width: 200px;
  height: 50px;
  background-color: goldenrod;
}

#one {
  display: inline-block;
  font-size: 20pt;
  width: 50px;
  height: 50px;
  background-color: hotpink;
  text-align: center;
  line-height: 50px;
  border: 2px solid black;
}

#two {
  display: inline-block;
  font-size: 20pt;
  width: 50px;
  height: 50px;
  background-color: hotpink;
  text-align: center;
  line-height: 50px;
  border: 2px solid black;
}

#eql {
  display: inline-block;
  font-size: 20pt;
  border: 2px solid black;
  margin: 5px;
  text-align: center;
  line-height: 50px;
  width: 200px;
  height: 50px;
  background-color: skyblue;
  transition: .3s;
}

#sub {
  display: inline-block;
  font-size: 20pt;
  border: 2px solid black;
  margin: 5px;
  text-align: center;
  line-height: 50px;
  width: 200px;
  height: 50px;
  background-color: lightgray;
}

<input id="hres" readonly></input><br>
<div id="one">1</div>
<div id="two">2</div><br>
<button onclick="plus()" id="sum">+</button>
<button onclick="minus()" id="sub">-</button>
<button id="eql">=</button>

Answer 1

首先让我们确定问题：

1. 您正在为每次点击加号或减号时的等号按钮注册事件监听器。这意味着事件功能将在注册时运行多次，并将影响结果
2. 您没有重新调整变量。在等于之后，您希望numI成为新的总数，以便您可以将下一个操作值存储在num2中，然后在equals上执行正确的计算

要实现这一点，需要对代码进行相当多的重构。我用注释突出了重点：

// Register all events once, and once only.
document.getElementById('sum').addEventListener("click", plus);
document.getElementById('sub').addEventListener("click", minus);
document.getElementById('eql').addEventListener('click', equal);
document.getElementById('one').addEventListener("click", uno);
document.getElementById('two').addEventListener("click", duo);

// Get input element for display purposes.
var screen = document.getElementById('hres');

// Variables to hold the numbers we are working with, and the operation symbol.
var numI = 0;
var numII = 0;
var operation = null;

// Simple functions to handle each number button.
// You could use a data-* attribute and have a sinle generic function.
function uno() {
  setNumber(1);
}

function duo() {
  setNumber(2);
}

// Function that processes any number provided.
// The key here is to check if the user has click an operations button,
// if so then we want to set the second variable. Otherwise set the first.
function setNumber(n) {
  screen.value = n;
  if (operation)
    numII = n;
  else
    numI = n;
}

// Basic functions to set the operation type. Again, data-* attribute would be useful.
function plus() {
  operation = '+';
}

function minus() {
  operation = '-';
}

// Function to calculate result.
// Here we check what the operation is and apply the correct logic to match.
// Importantly, at the end, we assign the result to numI so it is ready for the next operation.
function equal() {
  var result = 'err';
  if (operation == '+')
    result = numI + numII;
  else if (operation == '-')
    result = numI - numII;
  numI = result;
  screen.value = result;
}

Here is a working example.

注意：即使进行了这些更改，他们也不会对用户输入进行任何验证。它非常依赖于用户按正确顺序按下按钮（即数字＆gt;操作＆gt;数字＆gt;等于＆gt;操作/数字等）。如果你想进一步改进你的代码，你应该考虑这个问题，但是作为这个问题的答案，提供这个代码是不合适的。