NaN error and non-working substract

Question

Calculator link: http://357682.cmd16a.cmi.hanze.nl/rekenmachine/calc.html

I am trying to build a calculator using HTML, CSS and JS but I can't get it to work correctly. There are 2 (actually 3) things going wrong.

The first is the subtract. When I enter '4-2' it gives '6' as a result instead of 2 and I have no idea why. Besides that, when I do '4*2' or '4/2' (so multiply and divide) it outputs NaN. I have no idea what's going wrong in my code.

$(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

When you get a opperator you save it and show in the screen. And then when you get the following number, you dont remove the opperator and still uses the "string" on the screen to do the math.

So "4 - 2" becomes "4 - -2"... Equals to 6.

"3 * *4" is NaN since you do a parseFloat.

Your code to handle a number should be something like

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