jQuery如何在输入字段中显示计算结果？

Question

我正在构建一个计算器。单击按钮时，我可以在输入字段中显示输入值，但是当<button id="equals">

<button id="equalsButton" class="operator" value="=">=</button></td>

单击的结果值是附加的替换它的实例。比如点击了9、+、9、=

输入栏显示输入值：9+918=

输入字段：

<input id="display" name="display" disabled></input>

我的脚本：

  $(document).ready(function() {
    var num1 = '';
    var num2 = '';

    var operator = '';
    var total = '';

    $('button').on('click', function(e) {
        var btn = e.target.innerHTML;

        if (btn >= '0' && btn <= '9') {
          handleNumber(btn);
          console.log('number');
        } else {
          handleOperator(btn);
          console.log('operator');
        }
    });

    function handleNumber(num) {
      if (num1 == '') {
          num1 = num;
        } else {
          num2 = num;
        }
        displayButton(num);
    }

    function handleOperator(op) {
      if (operator == '') {
          operator = op;
        } else {
          handleTotal();
          operator = op;
        }
        displayButton(op);
    }

    function handleTotal() {
        switch (operator) {
            case '+':
                total = +num1 + +num2; // Use + before variable to convert string to number
                displayButton(total);
                break;
            case '-':
                total = +num1 - +num2; // Use + before variable to convert string to number
                displayButton(total);
                break;
                ...
                ...
                ...

        }
        updateVariables();
    }

    function displayButton(btn) {
      $('#display').val($('#display').val() + btn);
    }

    function updateVariables() {
      num1 = total;
      num2 = '';
    }


      $('#clearButton').on('click', function() {
        var clear = $('#display').val('');
      });

});

这是我遇到的最后一个问题。如果您在当前问题旁边看到其他错误，我几乎完成了该项目，请提出建议，非常感谢您的帮助！

提前谢谢你！

Answer 1

解决方案可能是 showResult 的额外功能和 handleOperator 的更改（最后一行）：

  $(document).ready(function() {
    var num1 = '';
    var num2 = '';

    var operator = '';
    var total = '';

    $('button').on('click', function(e) {
      var btn = e.target.innerHTML;

      if (btn >= '0' && btn <= '9') {
        handleNumber(btn);
        console.log('number');
      } else {
        handleOperator(btn);
        console.log('operator');
      }
    });

    function handleNumber(num) {
      if (num1 == '') {
        num1 = num;
      } else {
        num2 = num;
      }
      displayButton(num);
    }

      function handleOperator(op) {
      if (operator == '') {
        operator = op;
      } else {
        handleTotal();
        operator = op;
      }
      if (op != '=') { displayButton(op); }
    }

    function handleTotal() {
      switch (operator) {
        case '+':
          total = parseInt(num1) + parseInt(num2);
          showResultOnButton(total);
          break;
        case '-':
          total = parseInt(num1) - parseInt(num2);
          showResultOnButton(total);
          break;
        case '/':
          total = parseInt(num1) / parseInt(num2);
          showResultOnButton(total);
          break;
        case '*':
          total = parseInt(num1) * parseInt(num2);
          showResultOnButton(total);
          break;
      }
      updateVariables();
    }

    function displayButton(btn) {
      $('#display').val($('#display').val() + btn);
    }

    function showResultOnButton(btn) {
      $('#display').val(btn);
    }

    function updateVariables() {
      num1 = total;
      num2 = '';
    }


    $('#clearButton').on('click', function() {
      $('#display').val('');
    });

  });