計算器Javascript中的運算符無法正常運行

Question

我正在用Javascript為FreeCodeCamp構建一個計算器。 我對一部分代碼有疑問。 當我添加諸如“-”，“ +”，“ x”之類的運算符時，歷史記錄部分中的數字會重復其自身。 例如，如果我輸入“ 5”，則“ 5”出現在歷史記錄區域中。 然后我輸入“ +”，歷史記錄顯示為“ 5 + 5 +”。

另外，我希望計算器的工作方式類似於Mac計算機中的計算器。 換句話說，如果我輸入“ 5”，然后輸入“ +”，我希望“ 5”留在顯示區域，而“ 5+”出現在歷史記錄區域中，直到按下下一個數字。 當歷史記錄顯示為“ 5 + 6”時，它將顯示下一個數字。 我該如何解決這兩個問題？

這是我的代碼筆鏈接： https ://codepen.io/kikibres/pen/MEQvqv

您也可以在這里看到它：

 $(document).ready(function() { var mainMath = "0"; var subMath = "0"; update(); var period = /\\./; $("button").click(function(){ calculate($(this).attr("value")); }); function calculate(keyitem) { switch(keyitem) { case "clear": clearScreen(); break; case "plusminus": plusminusScreen(); break; case "%": percentageScreen(); break; case "/": case "*": case "+": case "-": addOperator(keyitem); break; case "0": case "1": case "2": case "3": case "4": case "5": case "6": case "7": case "8": case "9": case ".": addNumber(keyitem); break; case "=": solveEqual(); break; } update(); }; function clearScreen() { mainMath = "0"; subMath = "0"; }; function plusminusScreen() { mainMath = -1 * mainMath; subMath = -1 * subMath; }; function addNumber(keyitem) { if (keyitem == "."){ if(mainMath == 0 && subMath == 0) { mainMath = "0" + keyitem; subMath = "0" + keyitem; return; } } if (mainMath == "0" && subMath == "0"){ mainMath=keyitem; subMath=keyitem; return; } mainMath+=keyitem; subMath+=keyitem; }; function addOperator(keyitem){ addNumber(keyitem); subMath += mainMath; mainMath = keyitem; }; function update(){ document.getElementById("answer").innerHTML = mainMath; document.getElementById("history").innerHTML = subMath; }; }); 

 @import url('https://fonts.googleapis.com/css?family=Roboto:300,400'); h1, h2, h3, p { font-family: 'Roboto', sans-serif; } html, body{ height:100%; margin: 0; background-color: #ffffff; } .wrapper { width: 100%; height: 100%; position: relative; display:flex; flex-direction:column; justify-content:center; align-items:center; background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 160px 0; } .calculatorbox { width: 260px; margin: 0 auto; border: 1px solid #000000; } .calheader { text-align: center; } .calwindow { background: #000000; position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; /* Safari */ flex-direction: column; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-align-items: flex-end; align-items: flex-end; padding: 10px 0; box-sizing: border-box; } .entry { font-size: 4em; display: block; line-height: 1em; } .entryhistory { font-size: 1em; padding-right: 5px; } .entry p, .entryhistory p { margin: 0; color: #ffffff; } sup { top: -0.5em; } sub { bottom: -0em; } .row { clear: both; width: 100%; display: flex; } button { display: inline-block; border: none; padding: 0; outline: none; cursor: pointer; } .key { width: 65px; height: 60px; font-size: 22px; border-top: 1px solid rgba(0, 0, 0, 0.3); border-right: 1px solid rgba(0, 0, 0, 0.3); box-sizing: border-box; } .key.btnspan { width: 130px; } .key.topcolor { background: #d9d9d9; } .key.orange { background: #ff8c00; color: #ffffff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="calheader"> <h2>Simple Calculator</h2> </div> <div class="calculatorbox"> <div class="calwindow"> <!-- ENTRY BOX --> <div class="entry"> <p id="answer"></p> </div> <div class="entryhistory"> <p id="history"></p> </div> </div> <!-- BUTTONS --> <div class="calbuttons"> <div class="row"> <button class="key topcolor" value="clear">C</button> <button class="key topcolor" value="plusminus"><sup>+</sup>/<sub>−</sub></button> <button class="key topcolor" value="%">%</button> <button class="key orange" value="/">÷</button> </div> <div class="row"> <button class="key" value="7">7</button> <button class="key" value="8">8</button> <button class="key" value="9">9</button> <button class="key orange" value="*">×</button> </div> <div class="row"> <button class="key" value="4">4</button> <button class="key" value="5">5</button> <button class="key" value="6">6</button> <button class="key orange" value="-">−</button> </div> <div class="row"> <button class="key" value="1">1</button> <button class="key" value="2">2</button> <button class="key" value="3">3</button> <button class="key orange" value="+">+</button> </div> <div class="row"> <button class="key btnspan" value="0">0</button> <button class="key" value=".">.</button> <button class="key orange" value="=">=</button> </div> </div> </div> </div> 

我遇到問題的部分是：

function addOperator(keyitem){
    addNumber(keyitem);
    subMath += mainMath;
    mainMath = keyitem;
  };

******************************更新******************* ***************到目前為止，我已經能夠解決歷史記錄區域的問題。 但是，我無法解決顯示問題。 現在的問題是，每次我單擊“ 7”之類的數字，然后單擊“ +”之類的運算符時，顯示區域中的數字都會變回“ 0”。 另外，在操作員之后，我然后單擊另一個數字，例如“ 3”，它在顯示區域中顯示為“ 03”。這是我更新的代碼：

function addOperator(keyitem){
    if(mainMath == "0"){
      /*subMath === "0";*/
      return;
    }
    /*addNumber(keyitem);*/
    subMath += keyitem;
    mainMath = "0";
  };

Answer 1

對於第二個問題，您必須將顯示邏輯和計算邏輯分開。 您想要的是：

• 當您鍵入數字=>顯示數字或結果時（單獨的函數，單獨的變量）
• 數字或運算符=>計算（另一個函數，其他變量）

在您的代碼中，這兩種邏輯混合在一起。

盡力為您提供最大的幫助。 您可以使用調試器並逐步使用它，也可以在代碼中添加utilies函數，如下所示：

 $(document).ready(function() { // My check point function function ckval(name, where){ if (undefined != where) { where += ' ' } console.log(name + " " + where + "= ", eval(name)) } var mainMath = "0"; var subMath = "0"; update(); var period = /\\./; $("button").click(function(){ calculate($(this).attr("value")); }); function calculate(keyitem) { switch(keyitem) { case "clear": clearScreen(); break; case "plusminus": plusminusScreen(); break; case "%": percentageScreen(); break; case "/": case "*": case "+": case "-": addOperator(keyitem); break; case "0": case "1": case "2": case "3": case "4": case "5": case "6": case "7": case "8": case "9": case ".": addNumber(keyitem); break; case "=": solveEqual(); break; } update(); }; function clearScreen() { mainMath = "0"; subMath = "0"; }; function plusminusScreen() { mainMath = -1 * mainMath; subMath = -1 * subMath; }; function addNumber(keyitem) { console.log("-> addNumber("+keyitem+")",); // <- method if (keyitem == "."){ if(mainMath == 0 && subMath == 0) { mainMath = "0" + keyitem; subMath = "0" + keyitem; return; } } if (mainMath == "0" && subMath == "0"){ mainMath=keyitem; subMath=keyitem; return; } mainMath+=keyitem; subMath+=keyitem; ckval('mainMath', 'at bottom of addNumber'); // <- checkPoint ckval('subMath', 'at bottom of addNumber'); // <- checkPoint }; function addOperator(keyitem){ console.log("-> addOperation("+keyitem+")"); ckval('mainMath'); // <- checkPoint ckval('subMath'); // <- checkPoint addNumber(keyitem); ckval('mainMath', 'after addNumber'); // <- checkPoint ckval('subMath', 'after addNumber'); // <- checkPoint subMath += mainMath; mainMath = keyitem; ckval('mainMath', 'at bottom of addOperator'); // <- checkPoint ckval('subMath', 'at bottom of addOperator'); // <- checkPoint }; function update(){ document.getElementById("answer").innerHTML = mainMath; document.getElementById("history").innerHTML = subMath; }; }); 

 @import url('https://fonts.googleapis.com/css?family=Roboto:300,400');h1, h2, h3, p { font-family: 'Roboto', sans-serif;}html, body{ height:100%; margin: 0; background-color: #ffffff;}.wrapper { width: 100%; height: 100%; position: relative; display:flex; flex-direction:column; justify-content:center; align-items:center; background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 160px 0;}.calculatorbox { width: 260px; margin: 0 auto; border: 1px solid #000000;}.calheader { text-align: center;}.calwindow { background: #000000; position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; /* Safari */ flex-direction: column; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-align-items: flex-end; align-items: flex-end; padding: 10px 0; box-sizing: border-box;}.entry { font-size: 4em; display: block; line-height: 1em;}.entryhistory { font-size: 1em; padding-right: 5px;}.entry p, .entryhistory p { margin: 0; color: #ffffff;}sup { top: -0.5em;}sub { bottom: -0em;}.row { clear: both; width: 100%; display: flex;}button { display: inline-block; border: none; padding: 0; outline: none; cursor: pointer;}.key { width: 65px; height: 60px; font-size: 22px; border-top: 1px solid rgba(0, 0, 0, 0.3); border-right: 1px solid rgba(0, 0, 0, 0.3); box-sizing: border-box;}.key.btnspan { width: 130px;}.key.topcolor { background: #d9d9d9;}.key.orange { background: #ff8c00; color: #ffffff;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"><div class="calheader"><h2>Simple Calculator</h2></div><div class="calculatorbox"><div class="calwindow"> <!-- ENTRY BOX --> <div class="entry"> <p id="answer"></p> </div> <div class="entryhistory"> <p id="history"></p> </div></div><!-- BUTTONS --><div class="calbuttons"> <div class="row"> <button class="key topcolor" value="clear">C</button> <button class="key topcolor" value="plusminus"><sup>+</sup>/<sub>−</sub></button> <button class="key topcolor" value="%">%</button> <button class="key orange" value="/">÷</button> </div> <div class="row"> <button class="key" value="7">7</button> <button class="key" value="8">8</button> <button class="key" value="9">9</button> <button class="key orange" value="*">×</button> </div> <div class="row"> <button class="key" value="4">4</button> <button class="key" value="5">5</button> <button class="key" value="6">6</button> <button class="key orange" value="-">−</button> </div> <div class="row"> <button class="key" value="1">1</button> <button class="key" value="2">2</button> <button class="key" value="3">3</button> <button class="key orange" value="+">+</button> </div> <div class="row"> <button class="key btnspan" value="0">0</button> <button class="key" value=".">.</button> <button class="key orange" value="=">=</button> </div></div></div></div> 

這樣，您可以立即看到問題發生的位置。 這是： subMath = at bottom of addOperator 8+8+ 。

然后容易修復。

---

也許另一種方法也可以幫助您。 請參閱以下內容（行為不完全相同，但是您可以輕松更改）：

 $(document).ready(function() { // +stackOperations+ keeps every user action let stackOperations = [] // +currentDispQueue+ keeps trace of the current top display , currentDispQueue = '' ; // To catch the user click event $("button").click(function(){ catchClick($(this).attr("value")); }); /** * Catch the user click * Note: 'calculate' is a less good name for this fonction * // function calculate(keyitem) { */ function catchClick(keyitem) { switch(keyitem) { case "clear": return reset() ; // clearScreen is actually a `reset` case "plusminus": if (stackOperations.length) { currentDispQueue = '' ; updateUserDisplay('-' + currentDispQueue) ; stackOperations.push({type: 'operator', value: '*-1'}) }; break; case "/":case "*": case "+": case "-": case '.': currentDispQueue = '' ; stackOperations.push({type: 'operator', value: keyitem}); break; case "=": return displayTotal(); default: if (keyitem >= 0 && keyitem < 10) { stackOperations.push({type: 'number', value: parseInt(keyitem)}) displayCurrentQueue( currentDispQueue + keyitem ); // "6"+"3" => "63" } }; displayCurrentHistory(); // always (each user action => reaction) } /** * Display the result of the calc */ function displayTotal() { displayCurrentQueue(calculProceed()); } /** * Reset App */ function reset() { stackOperations = [] ; currentDispQueue = '' ; displayCurrentHistory('&nbsp;') ; displayCurrentQueue() ; }; reset(); /** * Display methods */ function displayCurrentQueue(displayedValue){ document.getElementById("answer").innerHTML = displayedValue || '0'; if (displayedValue) currentDispQueue = displayedValue ; } function displayCurrentHistory(){ document.getElementById("history").innerHTML = history(); } /** * Calc methods * */ /** Return the 'history', ie the calcul as a string */ function history() { return stackOperations.reduce( (x, y) => { return x + y.value } , ''); } /** Eval the history and return it */ function calculProceed() { return eval(history()); } }); 

 @import url('https://fonts.googleapis.com/css?family=Roboto:300,400');h1, h2, h3, p { font-family: 'Roboto', sans-serif;}html, body{ height:100%; margin: 0; background-color: #ffffff;}.wrapper { width: 100%; height: 100%; position: relative; display:flex; flex-direction:column; justify-content:center; align-items:center; background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 160px 0;}.calculatorbox { width: 260px; margin: 0 auto; border: 1px solid #000000;}.calheader { text-align: center;}.calwindow { background: #000000; position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; /* Safari */ flex-direction: column; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-align-items: flex-end; align-items: flex-end; padding: 10px 0; box-sizing: border-box;}.entry { font-size: 4em; display: block; line-height: 1em;}.entryhistory { font-size: 1em; padding-right: 5px;}.entry p, .entryhistory p { margin: 0; color: #ffffff;}sup { top: -0.5em;}sub { bottom: -0em;}.row { clear: both; width: 100%; display: flex;}button { display: inline-block; border: none; padding: 0; outline: none; cursor: pointer;}.key { width: 65px; height: 60px; font-size: 22px; border-top: 1px solid rgba(0, 0, 0, 0.3); border-right: 1px solid rgba(0, 0, 0, 0.3); box-sizing: border-box;}.key.btnspan { width: 130px;}.key.topcolor { background: #d9d9d9;}.key.orange { background: #ff8c00; color: #ffffff;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"><div class="calheader"><h2>Simple Calculator</h2></div><div class="calculatorbox"><div class="calwindow"> <!-- ENTRY BOX --> <div class="entry"> <p id="answer"></p> </div> <div class="entryhistory"> <p id="history"></p> </div></div><!-- BUTTONS --><div class="calbuttons"> <div class="row"> <button class="key topcolor" value="clear">C</button> <button class="key topcolor" value="plusminus"><sup>+</sup>/<sub>−</sub></button> <button class="key topcolor" value="%">%</button> <button class="key orange" value="/">÷</button> </div> <div class="row"> <button class="key" value="7">7</button> <button class="key" value="8">8</button> <button class="key" value="9">9</button> <button class="key orange" value="*">×</button> </div> <div class="row"> <button class="key" value="4">4</button> <button class="key" value="5">5</button> <button class="key" value="6">6</button> <button class="key orange" value="-">−</button> </div> <div class="row"> <button class="key" value="1">1</button> <button class="key" value="2">2</button> <button class="key" value="3">3</button> <button class="key orange" value="+">+</button> </div> <div class="row"> <button class="key btnspan" value="0">0</button> <button class="key" value=".">.</button><button class="key orange" value="=">=</button></div></div></div></div>