由于 JS，基本计算器无法正常工作？

Question

我正在尝试构建一个基本计算器，但我的代码没有加起来。我的计算器应该做的是对输入 num1 和 num2 中插入的两个数字进行加、减、除或乘。然后在空 div 中打印答案，并将答案作为 id。

var numbers = new Object();
numbers.num1 = -1;
numbers.num2 = -1;

$("#num1").bind("keyup mouseup", function() {
  numbers.num1 = ("#num1").val();

});

$("num1").bind("keyup mouseup", function() {
  numbers.num2 = ("num2").val();
});

$("#add").on("click", function() {
  var add = numbers.num1 + numbers.num2;
  $("#answer").text(add);
});

$("#substract").on("click", function() {
  var subs = numbers.num1 - numbers.num2;
  $("#answer").text(subs);
});

$("#multiply").on("click", function() {
  var multi = numbers.num1 * numbers.num2;
  $("#answer").text(multi);
});

$("#divide").on("click", function() {
  var div = numbers.num1 / numbers.num2;
  $("#answer").text(div)

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="user-inputs">
  <form>
    <input type="number" name="inputNum1" id="num1">
  </form>
  <form>
    <input type="number" name="inputNum2" id="num2">
  </form>
</div>
<div class="functions">
  <button id="add">add</button>
  <button id="substract">substract</button>
  <button id="multiply">multiply</button>
  <button id="divide">divide</button>
</div>

<h2 id="answer"></h2>

Answer 1

您的代码存在一些问题：

1. 您缺少 jQuery 的 $，并且在元素选择器中缺少 #。

   $("#num1").bind("keyup mouseup", function(){
       numbers.num1 = $("#num1").val();
   
   });
   
   $("#num2").bind("keyup mouseup",  function(){
       numbers.num2 = $("#num2").val();
   });
   

2. 您没有将数字转换为数字。输入值被视为字符串，因此您需要将它们转换为数字，以便 JavaScript 正确计算它们：

   $("#num1").bind("keyup mouseup", function(){
       numbers.num1 = parseInt($("#num1").val(), 10);
   
   });
   
   $("#num2").bind("keyup mouseup",  function(){
       numbers.num2 = parseInt($("#num2").val(), 10);
   });
   

（parseInt 函数的第二个参数是基数，在本例中为 10。）

Answer 2

您的代码中有一些错误。例如，

numbers.num2 = ("num2").val();

错了，因为您必须使用$ 符号才能访问 jquery 对象。

numbers.num2 = $("num2").val();

此外，数字中的sum 是数字的串联，因为您忘记使用parseInt() 函数或使用其他方法转换为数字。

var numbers = new Object();
    numbers.num1 = -1;
    numbers.num2 = -1;

$("#num1").bind("keyup mouseup", function(){
    numbers.num1 = $("#num1").val();

});

$("#num2").bind("keyup mouseup",  function(){
    numbers.num2 = $("#num2").val();
});

$("#add").on("click", function(){
    var add = +numbers.num1 +(+ numbers.num2);
    $("#answer").text(add);
});

$("#substract").on("click", function(){
    var subs = numbers.num1 - numbers.num2;
    $("#answer").text(subs);
});

$("#multiply").on("click", function(){
    var multi = numbers.num1 * numbers.num2;
    $("#answer").text(multi);
});

$("#divide").on("click", function(){
    var div = numbers.num1/numbers.num2;
    $("#answer").text(div)

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="user-inputs">
    <form>
        <input type="number" name="inputNum1" id="num1">
    </form>
    <form>
        <input type="number" name="inputNum2" id="num2">
    </form>
</div>
<div class = "functions">
<button id="add">add</button>
<button id="substract">substract</button>
<button id="multiply">multiply</button>
<button id="divide">divide</button>
</div>

<h2 id="answer"></h2>
</body>
</html>

Answer 3

您忘记在这些行中添加 $ 符号，在最后一行中添加 #

$("#num1").bind("keyup mouseup", function(){
    numbers.num1 = $("#num1").val();

});

$("#num1").bind("keyup mouseup",  function(){
    numbers.num2 = $("#num2").val();
});