基本计算器不能工作，因为JS？

Question

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

null

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>

null

Answer 1

您忘记在这几行中加上$，在最后一行中加上#

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

});

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

Answer 2

您的代码有几个问题：

>

您缺少jQuery的$以及元素选择器中的#。

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

});

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

您没有将这些数字转换成一个数字。输入值被视为字符串，因此您需要将其转换为一个数字，以便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 3

你的代码中有一些错误。例如,

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

是错误的，因为必须使用$签名才能访问jquery对象。

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

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

null

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>