如何显示在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('');
    });

  });