NaN 错误和非工作减法

Question

计算器link：http://357682.cmd16a.cmi.hanze.nl/rekenmachine/calc.html

我正在尝试使用 HTML、CSS 和 JS 构建一个计算器，但我无法使其正常工作。有 2 处（实际上是 3 处）出错了。

首先是减法。当我输入“4-2”时，它给出的结果是“6”而不是 2，我不知道为什么。除此之外，当我执行“4*2”或“4/2”（即乘法和除法）时，它会输出 NaN。我不知道我的代码出了什么问题。

$(document).ready(function() {

  var display = "";
  var clear = 0;
  var invoer = 0;
  var mgetal = null;
  scherm(clear);

  $(".memory").on("click", function() {
    if ($(this).hasClass("mem_add")) {
      mgetal = (mgetal === null) ? (+$(".calcscherm").text()) : mgetal +
        (+$(".calcscherm").text());
      $(".memoryscherm").html(mgetal);
    }
    if ($(this).hasClass("mem_less")) {
      if (mgetal !== null) {
        mgetal = mgetal - (+$(".calcscherm").text());
        $(".memoryscherm").html(mgetal);
      } else {
        $(".calcscherm").empty();
        $(".calcscherm").append("Geheugen is nog leeg");
      }
    }
    if ($(this).hasClass("mem_show")) {
      if (mgetal !== null) {
        $(".calcscherm").html(mgetal);
        display = mgetal;
      } else {
        $(".calcscherm").empty();
        $(".calcscherm").append("Geheugen is nog leeg");
      }
    }
    if ($(this).hasClass("mem_clear")) {
      if (mgetal !== null) {
        mgetal = 0;
        $(".memoryscherm").html("Geheugen is leeggehaald");
      } else {
        $(".calcscherm").empty();
        $(".calcscherm").append("Geheugen is nog leeg");
      }
    }
  });

  $(".buttons span").on("click", function() {
    var drukKnop = $(this).html();

    if (drukKnop === "+/-") {
      display *= -1;
    } else if (drukKnop === ".") {
      display += ".";
    } else if (nummer(drukKnop)) {
      if (display === "0") display = drukKnop;
      else display = display + drukKnop;
    } else if (operator(drukKnop)) {
      invoer = parseFloat(display);
      reken = drukKnop;
      display = reken;
    } else if (drukKnop === "=") {
      display = uitvoer(invoer, display, reken);
      reken = null;
    }
    console.log(drukKnop);
    scherm(display);
  });

  $(".clear").on("click", function() {
    $(".calcscherm").text("0");
    display = "";
    clear = 0;
  });

  operator = function(value) {
    if (value === "+") return value;
    if (value === "-") return value;
    if (value === "*") return value;
    if (value === "/") return value;
  };

  nummer = function(value) {
    return !isNaN(value);
  }

  uitvoer = function(a, b, reken) {
    a = parseFloat(a);
    b = parseFloat(b);
    console.log(a, b, reken);
    if (reken === "+") return a + b;
    if (reken === "-") return a - b;
    if (reken === "*") return a * b;
    if (reken === "/") return a / b;
  }

});

scherm = function(schermtekst) {
  var schermtekst = schermtekst.toString();
  $(".calcscherm").html(schermtekst);
};

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>

<div id="calculator">
  <div class="container">
    <div class="memoryscherm"></div>
    <div class="buttons" style="margin:0; margin-top: 10px;">
      <div class="row">
        <span class="memory mem_clear">MC</span>
        <span class="memory mem_show">MR</span>
        <span class="memory mem_add">M+</span>
        <span class="memory mem_less memory-end">M-</span>
      </div>
    </div>
    <div class="calcscherm"></div>
  </div>
  <div class="buttons">
    <div class="row">
      <span class="operator">+</span>
      <span class="operator">-</span>
      <span class="operator">/</span>
      <span class="operator end">*</span>
    </div>
    <div class="row">
      <span class="number">7</span>
      <span class="number">8</span>
      <span class="number">9</span>
      <span class="eval end">=</span>
    </div>
    <div class="row">
      <span class="number">4</span>
      <span class="number">5</span>
      <span class="number">6</span>
      <span class="number">1</span>
    </div>
    <div class="row">
      <span class="number">2</span>
      <span class="number">3</span>
      <span class="number">.</span>
      <span class="number">0</span>
      <span class="clear">C</span>
    </div>
  </div>
</div>

Answer 1

当你得到一个操作符时，你将它保存并显示在屏幕上。然后当你得到下面的数字时，你没有删除运算符，仍然使用屏幕上的 "string" 来计算。

所以“4 - 2”变成“4 - -2”...等于 6。

“3 * *4”是 NaN，因为您执行了 parseFloat。

您处理数字的代码应该类似于

} else if (nummer(drukKnop)) {
   if (display === "0") display = drukKnop;
   else if (nummer(display)) display = display + drukKnop;
   else display = drukKnop;
}

NaN 错误和非工作减法

NaN error and non-working substract

html

javascript

calculator

nan

subtraction