Question

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

＆＃13;

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)

});

＆＃13;

<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>

＆＃13;

Answer 1

您的代码存在一些问题：

您缺少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 2

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

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

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

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

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

＆＃13;

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)

});

＆＃13;

<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>

＆＃13;

Answer 3

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

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

});

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

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

3 个答案: