Basisrechner funktioniert nicht wegen der JS?

Question

Ich versuche, einen grundlegenden Rechner zu bauen, aber mein Code summiert sich nicht. Was mein Rechner tun soll, ist addieren, subtrahieren, teilen oder multiplizieren die beiden Zahlen in die Eingänge num1 und num2 eingefügt. Dann drucke die Antwort im leeren Div mit Antwort als ID aus.

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

Es gibt einige Fehler in Ihrem Code. Zum Beispiel

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

ist falsch, weil Sie $ Zeichen verwenden, um ein Jquery-Objekt zuzugreifen.

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

Auch sum der Zahlen ist die Verkettung der Zahlen, weil Sie Nummer mit parseInt() Funktion oder mit anderen Methoden zu konvertieren vergessen.

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 2

Es gibt ein paar Probleme mit dem Code:

1. Sie vermissen die jQuery $ und # im Elementselektoreinrichtung fehlt.

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

2. Sie haben die Zahlen nicht in eine Zahl umgewandelt. Eingangswerte werden als Strings behandelt, so müssen Sie sie in eine Zahl konvertieren, so dass JavaScript sie korrekt berechnen wird:

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

(das zweite Argument der parseInt Funktion der Radix ist, die 10 ist in dieser Fall.)

Answer 3

Sie haben vergessen, das $ -Zeichen in diesen Zeilen und # in den letzten ein

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

}); 

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