如果在计算器中按下一个操作符然后按另一个操作符，如何修复？

时间：2017-11-12 03:13:35

标签： javascript jquery

我正在为FreeCodeCamp挑战构建一个计算器。除了几个问题，我的代码几乎完成了。其中一个问题是重复操作员。例如，如果有人按“5+”然后改变主意，按“ - ”代替，结果应为“5”。

以下是我Codepen的原始代码：

$(document).ready(function() {
  
  var mainMath = "0";
  var subMath = "0";
  var finalset = "";
  var subMatharray = [];
  var equaltrue = false;
  update();
  
  $("button").click(function(){
    calculate($(this).attr("value"));
  });
  
  function calculate(keyitem) {
    console.log("buttonpress: " + keyitem);
    switch(keyitem) {
      case "clear":
        clearScreen();
        break;
      case "%":
        percentageScreen();
        break;
      case "/":
      case "*":
      case "+":
      case "-":
        addOperator(keyitem);
        break;
      case "plusminus":
        plusminusScreen();
        break;
      case "0":
      case "1":
      case "2":
      case "3":
      case "4":
      case "5":
      case "6":
      case "7":
      case "8":
      case "9":
        addNumber(keyitem);
        break;
      case ".":
        addDecimal(keyitem);
        break;
      case "=":
        solveEqual(keyitem);
        break;
    }
    update();
    };
 
  function clearScreen() {
     mainMath = "0";
     subMath = "0";
     subMatharray = [];
    if(mainMath.length > 0){
      $(".entry").css("font-size", "4em");
    }
    console.log("clearMain: " + mainMath);
    console.log("clearSub: " + subMath);
  };
  
  function plusminusScreen() {
     mainMath = -1 * mainMath;
    finalset = mainMath;
    console.log("plusminusMain: " + mainMath);
    console.log("plusminusFinal: " + finalset);
  };
  
  function addNumber(keyitem) {
    if (mainMath == "0"){
      mainMath = keyitem/*mainMath.replace("0", keyitem);*/
      finalset = mainMath;
      return;
      console.log("addedMainZero: " + mainMath);
      console.log("addedFinalZero: " + finalset);
    }
    if (equaltrue == true){
      mainMath = keyitem;
      subMath = "0";
      subMatharray = [];
      console.log("addNumberEqualmain: " + mainMath);
    }
    mainMath+=keyitem;
    finalset = mainMath;
    
    console.log("addedMain: " + mainMath);
    console.log("addedFinalset: " + finalset);
    console.log("addedarray: " + subMatharray);
    
    if(mainMath.length > 8){
      $(".entry").css("font-size", "1.5em");
    }
    
  };
  
  function addOperator(keyitem){
    if (equaltrue == true){
      subMatharray = [];
      console.log("addOpEqualarray: " + subMatharray);
    }
    subMatharray.push(mainMath,keyitem);
    subMath = subMatharray.join("");
    mainMath = "0";
    console.log("addOpSub: " + subMath);
    console.log("addOpMain: " + mainMath);
    console.log("addOpMainarray: " + subMatharray);
    console.log("equaltrueTest: " + equaltrue);
  };
  
  function addDecimal(keyitem){
    if (mainMath.indexOf(keyitem) === -1){
      if(mainMath == "0") {
        mainMath = "0" + keyitem;
        return;
      }
    } else {
        return;
      }
    addNumber(keyitem);
  };
  
  function solveEqual(keyitem) {
    mainMath = eval(subMath+mainMath);
    console.log("solveEqualresult: " + mainMath);
    subMatharray.push(finalset);
    subMath = subMatharray.join("");
    console.log("solveEqualhistory: " + subMath);
    console.log("solveEqualarray: " + subMatharray);
    var finalresult = mainMath.toString();
    if(finalresult.length > 8){
      $(".entry").css("font-size", "1.5em");
    }
    equaltrue = true;
  };
  
  function update(){
  $("#answer").html(mainMath);
  $("#history").html(subMath);
};
  
});

/*Problems
2. I need to work on percentage button soon...
3. fix the problem if someone click an operator more than one.
*/
@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: 300px;
  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;
  letter-spacing: 2px;
  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: 75px;
  height: 70px;
  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: 150px;
}
.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">0</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()中对此区域的尝试。

function addOperator(keyitem){
    var opkeyitem = "";
    oppArray.push(keyitem);
    console.log("addoppArray: " + oppArray);
    if (oppArray.length > 1){
            oppArray.shift();  
      opkeyitem = oppArray.toString();
      subMatharray[1] = opkeyitem;
      subMath = subMatharray.join("");
      oppArray = [];
      console.log("addoppArrayShift: " + oppArray);
      console.log("addoppSubShift: " + subMatharray);
     } else if(oppArray.length == 1) {
      opkeyitem = oppArray.toString();
       if (equaltrue == true){
      subMatharray = [];
      console.log("addOpEqualarray: " + subMatharray);
    }
    subMatharray.push(mainMath,opkeyitem);
    subMath = subMatharray.join("");
    mainMath = "0";
    oppArray = [];
    }   
  };

我的想法是将按下的运算符存储在一个数组中。如果它不止一个操作符，那么数组应该敲掉第一个元素并使用最后一个元素并将其添加/替换到历史区域。

您如何建议我解决这个问题？

1 个答案:

答案 0 :(得分：0)

您需要记住最后按下的按钮是什么，并相应地更改df_Y <- structure(list(Y1 = c("1", "1", "1", "1", "1", "1", "2", "2", "1", "1", "2", "1", "1", "2", "2", "1", "2", "2", "1", "1", "2", "1", "1", "2", "2", "1", "2", "2", "1", "1", "2", "1", "1", "2", "2", "1", "2", "2", "2", "1", "1", "1", "2", "2", "1", "1", "2", "1", "1", "2", "2", "2", "2", "2", "2", "2"), Y2 = c(0.665664077829585, 1.02856261889775, 1.19055836913068, 1.10260084679125, 1.15705828895831, 1.06768199117752, 1.10038159049195, 1.19019555343219, 1.16367557830325, 1.17249680795712, 1.13359781336505, 1.08739115948259, 1.12381677088993, 1.15646116283926, 1.16886280825931, 1.23261515446765, 1.20143782448638, 1.19117526432255, 1.14453414539176, 1.12992954478391, 1.00942359172597, 1.36304817720811, 0.977737663980795, 0.803038132093719, 0.658557316689605, 1.08897993760763, 1.02561012617194, 0.953197521830857, 1.10932969513697, 1.14650953305854, 1.08216085976536, 1.04156195299253, 0.945898621136812, 0.949689535186447, 1.00475292030475, 1.1143173236383, 1.00267210653824, 0.887215247393604, 0.974738456110934, 1.05929723094296, 1.02576829587045, 1.02233864565999, 0.984999990038355, 1.06285567360253, 1.04974288902827, 1.0846639113405, 1.11423291175236, 0.851355064479879, 0.749599945595823, 0.935991720991809, 0.895595684187917, 0.9096390430551, 1.07024512065878, 0.999910689243934, 0, NA), Y3 = c("2017-08-01", "2017-08-17", "2017-08-21", "2017-08-24", "2017-08-28", "2017-08-31", "2017-08-31", "2017-09-04", "2017-09-05", "2017-09-07", "2017-09-08", "2017-09-08", "2017-09-11", "2017-09-12", "2017-09-14", "2017-09-14", "2017-09-16", "2017-09-19", "2017-09-19", "2017-09-21", "2017-09-21", "2017-09-22", "2017-09-25", "2017-09-25", "2017-09-27", "2017-09-27", "2017-09-28", "2017-09-30", "2017-09-30", "2017-10-02", "2017-10-03", "2017-10-02", "2017-10-04", "2017-10-05", "2017-10-06", "2017-10-06", "2017-10-07", "2017-10-09", "2017-10-10", "2017-10-07", "2017-10-10", "2017-10-11", "2017-10-11", "2017-10-12", "2017-10-14", "2017-10-16", "2017-10-16", "2017-10-17", "2017-10-19", "2017-10-18", "2017-10-20", "2017-10-20", "2017-10-21", "2017-10-25", "2017-11-02", "2017-11-06"), Y4 = c("2017-08-02", "2017-08-18", "2017-08-22", "2017-08-25", "2017-08-29", "2017-09-01", "2017-09-01", "2017-09-05", "2017-09-05", "2017-09-07", "2017-09-09", "2017-09-08", "2017-09-11", "2017-09-13", "2017-09-15", "2017-09-15", "2017-09-16", "2017-09-19", "2017-09-20", "2017-09-22", "2017-09-22", "2017-09-23", "2017-09-26", "2017-09-26", "2017-09-28", "2017-09-28", "2017-09-28", "2017-09-30", "2017-09-30", "2017-10-02", "2017-10-03", "2017-10-03", "2017-10-04", "2017-10-05", "2017-10-07", "2017-10-06", "2017-10-07", "2017-10-09", "2017-10-10", "2017-10-09", "2017-10-10", "2017-10-12", "2017-10-11", "2017-10-12", "2017-10-14", "2017-10-17", "2017-10-16", "2017-10-17", "2017-10-19", "2017-10-19", "2017-10-20", "2017-10-21", "2017-10-25", "2017-10-28", "2017-11-04", NA)), .Names = c("Y1", "Y2", "Y3", "Y4"), row.names = c(NA, 56L), class = "data.frame") 功能的逻辑。如果最后按下的按钮是操作员并且有人再次按下操作员，则应首先从阵列中弹出原始按钮，然后保存按下的按钮，然后将新按钮按入其中。

一个简单的布尔变量addOperator可以完成所有工作或创建更通用的lastPressedIsOperator字符串变量并将其更改为lastPressedType / 'operator' / etc。相应于最后按下的按钮。然后在'number'中首先检查该变量中的内容并按照上述描述采取相应的行动。

相关问题
最新问题