javascript - JavaScript 计算器中只有除法按钮可以正常工作。 "Cannot read property ' toString' of undefined“其他运算符的错误

Question

我有一个可以工作的计算器，直到我在显示输出中添加了一个方程历史行。现在唯一可以正常工作的操作符是除法按钮。

当我执行除法方程(例如 8/9)时，它会按照我想要的方式工作。显示输出的顶行仅显示当前数字或运算符(或答案，如果问题已完成)，然后底行显示完整的方程。但是，当我尝试执行除法以外的任何操作时，计算器无法正常工作。

相反，它在顶部和底部显示完整的方程，当我点击等于按钮时，我在控制台中收到以下错误消息:

"Cannot read property 'toString' of undefined"

这让我相信我的正则表达式 chop 小数点后的数字导致了问题，但在我添加equation变量之前它就已经工作了。我也不明白为什么除法是唯一正常运行的运算符。有人可以解释为什么会发生这种情况和/或我做错了什么吗？

JSFiddle

Answer 1

这是您第一个问题的答案:为什么其他操作不起作用。

1:您正在检查 if($('.operator, #decimal').data('clicked')) ，它将给出第一个匹配的运算符，并且仅适用于除法。

2:当单击操作符时，您正在设置

$(this).data('clicked', true);

这意味着在除法以外的情况下，第 1 点和第 2 点将讨论不同的运算符。

我尝试通过在运算符(operator)按钮单击上设置运算符(operator)测试来修复它，并检查它是否为空，并在同等按钮单击时将其设置为空。

$(document).ready(function() {
    var num = "", operator = "", num2 = "", equation = "";
    var output = $("#output");
    output.text("0");
    var history = $("#history");
    history.text("0");

    $('.numbers').click(function() {
        if(operator !== "") {
          num2 += this.value;
          equation = num + num2;
          output.text(num2);
          history.text(equation);
        } else {
          num += this.value;
          output.text(num);
          history.text(num);
        }
        checkOperator();
        checkLimit();
    });

    $('.operator, #decimal').click(function() {
    
      $(this).data('clicked', true);
      num += this.value;
      operator = this.value;
      output.text(operator);
      history.text(num);
      checkOperator();
    });

    // checks if last input was an operator and prevents two from being used twice in a row
    function checkOperator() {
      if (num.slice(-1) === "+" || num.slice(-1) === "-" || num.slice(-1) === "/" || num.slice(-1) === "*") {
        $(".operator").attr("disabled", true);
      } else if (num.slice(-1) === ".") {
        $("#decimal").attr("disabled", true);
      } else {
        $(".operator").removeAttr("disabled");
        $("#decimal").removeAttr("disabled");
        history.text(num);
      }
    };

    function checkLimit() {
      if (num.length > 10) {
        num = "";
        num2 = "";
        operator = "";
        output.text("0");
        history.text("Digit Limit Reached");
      }
    };

    $('#ac').click(function() {
        num = "";
        num2 = "";
        equation = "";
        operator = "";
        output.text("0");
        history.text("0");
        operator="";
    });

    $('#ce').click(function() {
        num = num.slice(0, -1);
        if (num === "") {
          output.text("0");
          history.text("0");
        } else {
          output.text(num);
          history.text(num);
        }
    });

    $('#equals').click(function() {
      num = eval(equation);
      num = num.toString().match(/^-?\d+(?:\.\d{0,8})?/)[0];
      output.text(num);
      history.text(equation + " = " + num);
      operator = "";
      num2 = "";
      $(".operator").removeAttr("disabled");
    });

    $(document).keypress(function(event) {
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode === 49) {
          $("#one").click();
        } else if (keycode === 50) {
          $("#two").click();
        } else if (keycode === 51) {
          $("#three").click();
        } else if (keycode === 52) {
          $("#four").click();
        } else if (keycode === 53) {
          $("#five").click();
        } else if (keycode === 54) {
          $("#six").click();
        } else if (keycode === 55) {
          $("#seven").click();
        } else if (keycode === 56) {
          $("#eight").click();
        } else if (keycode === 57) {
          $("#nine").click();
        } else if (keycode === 48) {
          $("#zero").click();
        } else if (keycode === 97) {
          $("#ac").click();
        } else if (keycode === 99) {
          $("#ce").click();
        } else if (keycode === 61 || keycode === 13 || keycode === 187) {
          $("#equals").click();
        } else if (keycode === 43) {
          $("#add").click();
        } else if (keycode === 45) {
          $("#subtract").click();
        } else if (keycode === 42 || keycode === 120) {
          $("#multiply").click();
        } else if (keycode === 47) {
          $("#divide").click();
        } else if (keycode === 110 || keycode === 190) {
          $("#decimal").click();
        }
    });

});

* {
  margin: 10px auto;
}
body {
  background-color: #202020;
  font-family: 'Days One', sans-serif;

}
#screen {
  background: #94AFB5;
  width: 400px;
  height: 100px;
  font-size: 50px;
  border-radius: 10px;
  padding-right: 5px;
}
#history {
  font-size: 12pt;
  padding-right: 5px;
}
.calculator {
  font-size: 25px;
  position: relative;
  text-align: center;
  width: 410px;
  height: 550px;
  padding: 2px;
  background: #5591C3;
  border-radius: 15px;
  font-weight: bold;
  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;
}
button {
  margin: 2px;
  width: 85px;
  height: 55px;
  background-color: #084D87;
  color: #D17900;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  outline: none;
  border: none;
  box-shadow: 0 5px #053C6A;
  padding: 5px;
  vertical-align: top;
}
button:active {
  background-color: #084D87;
  box-shadow: 0 5px #053C6A;
  transform: translateY(4px);
}
#zero {
  width: 181px;
}
#ac, #ce {
  background-color: #EC0000;
  box-shadow: 0 5px #BC0000;
  color: #814B00;
}
.last-row {
  position: absolute;
  bottom: 16px;
  left: 31px;
}
#equals {
  height: 125px;
  font-size: 45px;
}
.footer {
  font-size: 10pt;
  color: #D17900;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>
<div class="container">
  <div class="calculator">
      <h3>ELECTRONIC CALCULATOR</h3>
      <div class="row">
        <div id="screen" class="text-right">
          <div id="output" class="text-right"></div>
          <div id="history" class="text-right"></div>
        </div>
      </div>
      <div class="row">
        <button id="ac">AC</button>
        <button id="ce">CE</button>
        <button class="operator" id="divide" value="/">&divide;</button>
        <button class="operator" id="multiply" value="*">&times;</button>
      </div>
      <div class="row">
        <button class="numbers" id="seven" value="7">7</button>
        <button class="numbers" id="eight" value="8">8</button>
        <button class="numbers" id="nine" value="9">9</button>
        <button class="operator" id="subtract" value="-">-</button>
      </div>
      <div class="row">
        <button class="numbers" id="four" value="4">4</button>
        <button class="numbers" id="five" value="5">5</button>
        <button class="numbers" id="six" value="6">6</button>
        <button class="operator" id="add" value="+">+</button>
      </div>
      <div class="row">
        <button class="numbers" id="one" value="1">1</button>
        <button class="numbers" id="two" value="2">2</button>
        <button class="numbers" id="three" value="3">3</button>
        <button id="equals">=</button>
      </div>
      <div class="row last-row">
        <button class="numbers" id="zero" value="0">0</button>
        <button id="decimal" value=".">.</button>
      </div>
  </div>
</div>
</body>

fiddle :https://jsfiddle.net/27rprs1g/