nUne erreur et non-travail

Question

lien substract Calculatrice: http://357682.cmd16a.cmi.hanze.nl/rekenmachine/calc.html

Je suis en train de construire une calculatrice en utilisant HTML, CSS et JS, mais je ne peux pas le faire fonctionner correctement. Il y a 2 (en fait 3) choses qui vont mal.

La première est la soustraction. Quand j'entre '4-2' cela donne '6' comme résultat au lieu de 2 et je n'ai aucune idée pourquoi. En plus de cela, quand je fais '4 * 2' ou '4/2' (donc multipliez et divisez) il sort NaN. Je n'ai aucune idée de ce qui ne va pas dans mon 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

Lorsque vous obtenez un opperator vous enregistrez et spectacle dans l'écran. Et puis quand vous obtenez le nombre suivant, vous ne retirez pas l'opperator et utilise toujours la "chaîne" sur l'écran pour faire le calcul.

Donc "4 - 2" devient "4 à -2" ... Egal à 6.

"3 * 4" est NaN puisque vous faites une parseFloat.

Votre code pour gérer un certain nombre doit être quelque chose comme

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