为什么计算器工作不正确

Question

我试图用香草JS制作我的第一个计算器。我的逻辑是以下内容。

• 您单击一个数字（1/2）
• 您击中标志（加/减）
• 您单击第二个号码
• 您击中并得到答案。

我的等价按钮通过Plus和负量获得不同的功能。但是，它无法正常工作。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. 您正在注册Equals按钮的事件侦听器单击或减去的每个时间。这意味着事件函数将运行多次，并将影响您的结果
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;
}

这是一个有效的例子。

---

注意：即使有这些更改，它们也没有对用户输入的任何验证。它非常依赖用户按正确的顺序按按钮（即编号>操作>数字>等于> equals>"操作/号码"等）。如果您想进一步改进代码，您应该考虑这一点，但是我将其作为对此问题的答案的范围不足。