代码不允许对javascript计算器进行正确的算术运算

Question

我当前的代码不允许我正确显示运算符。此时我无法在初始计算后显示运算符。例如，如果我这样做'9 + 2'然后按'='。我会得到一个结果，但是如果按下像'*'这样的运算符，显示屏只会显示没有数字的运算符。看看我目前的代码我错过了什么？请指教。

$(document).ready(function() {
  var shouldbeClear = false;
  //create variable to store input from user to calculate later
  var inputs = [''];
  //create string to store current input string
  var totalString;
  //create operators array for validation without the .
  var operators1 = ['+', '-', '*', '/'];
  var operators2 = ['.'];
  //numbers for validation
  var nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  function getValue(value) {
    if (operators2.includes(inputs[inputs.length - 1]) === true && value === '.') {
      alert('STOP & RESTART!!!');
    } else if (inputs.length === 1 && operators1.includes(value) === false) {
      inputs.push(value);
    } else if (operators1.includes(inputs[inputs.length - 1]) === false) {
      inputs.push(value);
    } else if (nums.includes(Number(value))) {
      inputs.push(value);
    }
    update();

  }

  function update() {
    totalString = inputs.join('');
    $('#display').html(totalString);
  }



  function getTotal() {
    shouldbeClear = true;
    totalString = inputs.join('');
    $('#display').html(eval(totalString));
    var result = document.getElementById("display").innerHTML;
    inputs = [];
    inputs[0] = '';
    for (var i = 0; i <= result.length - 1; i++) {
      inputs[i + 1] = result[i];

    }
    update();

  }

  $('button').on('click', function() {
    if (this.id === 'deleteAll') {
      inputs = ['0'];
      update();

    } else if (this.id === 'backSpace') {
      inputs.pop();
      update();
    } else if (this.id === 'total') {
      getTotal();

    } else {
      if (inputs[inputs.length - 1].indexOf('+', '-', '/', '*', '.') === -1) {
        if (shouldBeCleared){
        shouldBeCleared = false;
        inputs=[''];
        update();

        getValue(this.id);

      } else {
        getValue(this.id);


      }
    }

  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div id="calcOutput">
    <span id="display">Enter Some Number...</span>
    <hr>
  </div>
  <div class="text-center" id="calculator">
    <button type="button" class="btn btn-danger btn-lg btn3d" id="deleteAll">AC</button>
    <button type="button" class="btn btn-warning btn-lg btn3d" id="backSpace">CE</button>
    <button type="button" class="btn btn-success btn-lg btn3d" id="/">/</button>
    <button type="button" class="btn btn-success btn-lg btn3d" id="*">*</button><br>
    <button type="button" class="btn btn-primary btn-lg btn3d" id="7">7</button>
    <button type="button" class="btn btn-primary btn-lg btn3d" id="8">8</button>
    <button type="button" class="btn btn-primary btn-lg btn3d" id="9">9</button>
    <button type="button" class="btn btn-success btn-lg btn3d" id="-">-</button><br>
    <button type="button" class="btn btn-primary btn-lg btn3d" id="4">4</button>
    <button type="button" class="btn btn-primary btn-lg btn3d" id="5">5</button>
    <button type="button" class="btn btn-primary btn-lg btn3d" id="6">6</button>
    <button type="button" class="btn btn-success btn-lg btn3d" id="+">+</button><br>
    <button type="button" class="btn btn-primary btn-lg btn3d" id="1">1</button>
    <button type="button" class="btn btn-primary btn-lg btn3d" id="2">2</button>
    <button type="button" class="btn btn-primary btn-lg btn3d" id="3">3</button>
    <button type="button" class="btn btn-success btn-lg btn3d" id=".">.</button><br>

    <button type="button" class="btn btn-info btn-lg btn3d bigButton" id="0">0</button>
    <button type="button" class="btn btn-info btn-lg btn3d bigButton" id="total">=</button><br>
  </div>
</div>

Answer 1

添加一个变量，告知计算器是否应该清除所有内容。

我调用了变量=

每次点击shouldBeCleared时，shouldBeCleared都设置为true。

然后，如果您单击任何NUMBER，请检查$(document).ready(function() { var shouldBeCleared = false; //create variable to store input from user to calculate later var inputs = ['']; //create string to store current input string var totalString; //create operators array for validation without the . var operators1 = ['+', '-', '*', '/']; var operators2 = ['.']; //numbers for validation var nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; function getValue(value) { if (operators2.includes(inputs[inputs.length - 1]) === true && value === '.') { alert('STOP & RESTART!!!'); } else if (inputs.length === 1 && operators1.includes(value) === false) { inputs.push(value); } else if (operators1.includes(inputs[inputs.length - 1]) === false) { inputs.push(value); } else if (nums.includes(Number(value))) { inputs.push(value); } update(); } function update() { totalString = inputs.join(''); $('#display').html(totalString); } function getTotal() { shouldBeCleared = true; totalString = inputs.join(''); $('#display').html(eval(totalString)); var result = document.getElementById("display").innerHTML; inputs = []; inputs[0] = ''; for (var i = 0; i <= result.length - 1; i++) { inputs[i + 1] = result[i]; } update(); } $('button').on('click', function() { if (this.id === 'deleteAll') { inputs = ['0']; update(); } else if (this.id === 'backSpace') { inputs.pop(); update(); } else if (this.id === 'total') { getTotal(); } else { if (inputs[inputs.length - 1].indexOf('+', '-', '/', '*', '.') === -1) { if (shouldBeCleared){ shouldBeCleared = false; inputs=['']; update(); } getValue(this.id); } else { getValue(this.id); } } }) });是否设置为true，清除输入数组并更新（）。

如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div id="calcOutput">
    <span id="display">Enter Some Number...</span>
    <hr>
  </div>
  <div class="text-center" id="calculator">
    <button type="button" class="btn btn-danger btn-lg btn3d" id="deleteAll">AC</button>
    <button type="button" class="btn btn-warning btn-lg btn3d" id="backSpace">CE</button>
    <button type="button" class="btn btn-success btn-lg btn3d" id="/">/</button>
    <button type="button" class="btn btn-success btn-lg btn3d" id="*">*</button><br>
    <button type="button" class="btn btn-primary btn-lg btn3d" id="7">7</button>
    <button type="button" class="btn btn-primary btn-lg btn3d" id="8">8</button>
    <button type="button" class="btn btn-primary btn-lg btn3d" id="9">9</button>
    <button type="button" class="btn btn-success btn-lg btn3d" id="-">-</button><br>
    <button type="button" class="btn btn-primary btn-lg btn3d" id="4">4</button>
    <button type="button" class="btn btn-primary btn-lg btn3d" id="5">5</button>
    <button type="button" class="btn btn-primary btn-lg btn3d" id="6">6</button>
    <button type="button" class="btn btn-success btn-lg btn3d" id="+">+</button><br>
    <button type="button" class="btn btn-primary btn-lg btn3d" id="1">1</button>
    <button type="button" class="btn btn-primary btn-lg btn3d" id="2">2</button>
    <button type="button" class="btn btn-primary btn-lg btn3d" id="3">3</button>
    <button type="button" class="btn btn-success btn-lg btn3d" id=".">.</button><br>

    <button type="button" class="btn btn-info btn-lg btn3d bigButton" id="0">0</button>
    <button type="button" class="btn btn-info btn-lg btn3d bigButton" id="total">=</button><br>
  </div>
</div>

{{1}}