Как отобразить результат расчета в поле ввода в 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('');
    });

  });