如何将大于两位数的数字传递给计算器中的数组 jQuery + HTML

How can I pass bigger than two digit number to array in calculator jQuery + HTML

我正在使用 jQuery 和 HTML 制作一个简单的计算器。我将按钮的值传递给数组并将数组转换为字符串并使用 eval().

计算总数

我想不通的是传递超过 2 位数的值。目前我只能将 1 位数字传递给数组。如何将 20、200、2000 等值传递给数组?

codepen demo

jQuery代码:

var totalNum = [];

$(".button").click(function() {
  if (!$(this).hasClass("operator")) {
    $("#display").val(($("#display").val()) + ($(this).val()));
    totalNum.push((($("#display").val()) + ($(this).val())));
  } else {
    if ($("#display").val() != '') {
      if ($(this).hasClass("operator")) {
        $("#display").val('');
        totalNum.push(($(this).val()));
      } else {
        $("#display").val(($("#display").val()) + ($(this).val()));
        totalNum.push(($(this).val()));
      }
    }
  }
})

$("#clearButton").click(function() {
  $("#display").val('');
  totalNum = [];
})

$("#equalsButton").click(function() {
  var total = totalNum.join(" ");
  $("#display").val(eval(total));
})

var totalNum = [];

$(".button").click(function() {
  if (!$(this).hasClass("operator")) {
    $("#display").val(($("#display").val()) + ($(this).val()));
    //totalNum.push( (($("#display").val()) ));
    //console.log("two" + totalNum
    console.log('Not operator.');
  } else {
    if ($("#display").val() != '') {
      if ($(this).hasClass("operator")) {
        totalNum.push((($("#display").val())));
        // $("#display").val(($("#display").val()) + ($(this).val()));
        $("#display").val('');
        totalNum.push(($(this).val()));
        console.log("Click operator" + totalNum)
      } else {
        $("#display").val(($("#display").val()) + ($(this).val()));
        totalNum.push(($(this).val()));
        console.log("three" + totalNum)
      }
    }
  }
})

$("#clearButton").click(function() {
  $("#display").val('');
  totalNum = [];
})

$("#equalsButton").click(function() {
  totalNum.push((($("#display").val())));
  var total = totalNum.join(" ");
  console.log("total" + total)
  $("#display").val(eval(total));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td colspan="4"><input id="display" name="display" disabled></input>
    </td>
  </tr>

  <tr>
    <td><button id="button1" class="button number" value="1">1</button></td>
    <td><button id="button2" class="button number" value="2">2</button></td>
    <td><button id="button3" class="button number" value="3">3</button></td>
    <td><button id="addButton" class="button operator" value="+">+</button></td>
  </tr>
  <tr>
    <td><button id="button4" class="button number" value="4">4</button></td>
    <td><button id="button5" class="button number" value="5">5</button></td>
    <td><button id="button6" class="button number" value="6">6</button></td>
    <td><button id="subtractButton" class="button operator" value="-">-</button></td>
  </tr>
  <tr>
    <td><button id="button7" class="button number" value="7">7</button></td>
    <td><button id="button8" class="button number" value="8">8</button></td>
    <td><button id="button9" class="button number" value="9">9</button></td>
    <td><button id="multiplyButton" class="button operator" value="*">*</button></td>
  </tr>
  <tr>
    <td><button id="clearButton">C</button></td>
    <td><button id="button0" class="button number" value="0">0</button></td>
    <td><button id="equalsButton">=</button></td>
    <td><button id="divideButton" class="button operator" value="/">&#247;</button></td>
  </tr>



</table>

这是我的解决方案,而不仅仅是答案。

这只是解决您问题的一种方法。

如果我做一个计算器,我会尝试制定计划。

当用户点击 number button 时,我没有 push()

当用户点击 operator button 时,我之前输入数字时 push()

我也做 push() operator sign

当用户点击 equal button 时,我在输入数字之前执行 push(),然后执行 eval() 并显示计算结果。

我希望..理解我的解释。