我正在尝试减去，但它总是将一个变量与另一个变量相加

Question

全局定义的变量

let firstNumber = 0;
let secondNumber = 0;
let clearValue;
let operator = "";
const divs = document.querySelectorAll("#panel div");

div 选择和变量赋值

divs.forEach((div) => {
  div.addEventListener("click", () => {
    let selection1 = div.id;
    switch (selection1) {
      case "one":
        inputArea.value += "1";
        break;
      case "two":
        inputArea.value += "2";
        break;
      case "three":
        inputArea.value += "3";
        break;
      case "four":
        inputArea.value += "4";
        break;
      case "five":
        inputArea.value += "5";
        break;
      case "six":
        inputArea.value += "6";
        break;
      case "seven":
        inputArea.value += "7";
        break;
      case "eight":
        inputArea.value += "8";
        break;
      case "nine":
        inputArea.value += "9";
        break;
      case "zero":
        inputArea.value += "0";
        break;
      case "decimal":
        inputArea.value += ".";
        break;
      case "clear":
        clearValue = inputArea.value;
        clearValue = firstNumber.slice(0, -1);
        inputArea.value = clearValue;
        break;
      case "allClear":
        inputArea.value = "";
        break;
      case "add":
        operator = "+";
        firstNumber = parseFloat(inputArea.value);
        inputArea.value = "+";
        break;
      case "subtract":
        operator = "-";
        firstNumber = parseFloat(inputArea.value);
        inputArea.value = "-";
        break;
      case "divide":
        operator = "/";
        firstNumber = parseFloat(inputArea.value);
        inputArea.value = "/";
        break;
      case "multiply":
        operator = "x";
        firstNumber = parseFloat(inputArea.value);
        inputArea.value = "x";
        break;
      case "module":
        operator = "%";
        firstNumber = parseFloat(inputArea.value);
        inputArea.value = "%";
        break;
      case "equal":
        secondNumber = parseFloat(inputArea.value);
        console.log(secondNumber);
        inputArea.value = calculate(firstNumber, operator, secondNumber);
        break;
    }
  });
});

计算函数

 const calculate = (num1, oper, num2) => {
      num1 = parseFloat(num1);
      num2 = parseFloat(num2);
      switch (oper) {
        case "+":
          console.log(num1 + num2);
          return num1 + num2;
        case "-":
          console.log(num1 - num2);
          return num1 - num2;
        case "x":
          return num1 * num2;
        case "/":
          return num1 / num2;
        case "%":
          return num1 % num2;
      }
    };

这是我完整代码的链接。https://codepen.io/reddevil-1/pen/mdWqYbN。

我正在尝试制作一个计算器，为此我提供了一个输入字段，用户可以在其中单击计算器上的按钮以提供一些值作为输入。当我输入我的第一个值然后按下运算符按钮时，我将输入字段值保存到一个名为“第一个数字”的变量中，然后我将运算符存储在一个名为运算符的变量中，然后单击“=”，我将另一个数字存储在名为 secondNumber 的变量中，然后我调用一个函数进行计算部分。使用 switch 案例，我正在检查运算符的值，然后相应地返回值。加法工作正常，但是当我尝试减去一个数字时，它仍然最终将它们相加。谁能告诉我，我哪里出错了？

Answer 1

这是因为您的secondNumber 也有操作员登录。

 case "equal":
        secondNumber = parseFloat(inputArea.value);
        console.log(secondNumber);
        inputArea.value = calculate(firstNumber, operator, secondNumber);
        break;

在这里，您的 inputArea 也有要使用的运算符，所以当您使用 2 - 2 时，您的 firstNumber 是 2 运算符是 -，而您的第二个号码是 -2。

所以( 2 - (-2) ) = 4

这就是你的其他运营商也没有工作的原因

如果假设你想乘以 2 你的 secondNumber 将是 parseFloat('x2') = NaN

尝试删除除数字和点以外的所有额外符号，以计算secondNumber

 case "equal":
        secondNumber = parseFloat(inputArea.value.replace(/[^0-9\.]+/g, ""));
        console.log(secondNumber);
        inputArea.value = calculate(firstNumber, operator, secondNumber);
        break;

Answer 2

您的代码的问题在于，在您的numericals(0-9) 按下案例中，您正在附加带有按下数字的字符串，但该字符串已经包含运算符值（例如 +、- 等）

所以，让我们试着了解减法流中发生了什么 -

1. 用户按下5:

   inputArea.value = '5'

2. 用户按下-：

   inputArea.value = '-'

   运算符 = '-'

3. 用户按4:

   inputArea.value = '-4' （因为你正在追加）

   运算符 = '-'

然后你用值调用你的calculate 函数 - (5, '-', '-4') 这会导致5 - (-4) => 5 + 4，因此即使你在减去它也会添加。

Answer 3

您的解决方案有点复杂。那这个呢。所有按钮只有一个事件监听器。计算是使用 Function('return' + exp)() 来完成的，以替代 'eval()' 或您拥有的复杂开关。

var arr = [];

const calculate = expression => {
  return Function('return ' + expression)();
};

const update = str => {
  document.getElementById('line').innerText = str;
};

document.getElementById('buttons').addEventListener('click', e => {
  if (e.target.nodeName == 'BUTTON') {
    let value = e.target.attributes['data-value'].value;
    if (value == '=') {
      update(calculate(arr.join('')));
      arr = [];
    } else {
      arr.push(value);
      update(arr.join(''));
    }
  }
});

#line {
  font-family: mono;
  border: thin solid black;
  height: 1em;
}

<div id="buttons">
  <button data-value="1">1</button>
  <button data-value="2">2</button>
  <button data-value="3">3</button>
  <button data-value="+">+</button>
  <button data-value="-">-</button>
  <button data-value="=">=</button>
</div>
<div id="line"></div>