Basic calculator not working due to JS?
I'm trying to create a basic calculator, but my code doesn't add up. What my calculator has to do is add, subtract, divide, or multiply the two numbers inserted into the inputs num1 and num2. Then print the response in an empty div with the response as 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>
source to share
There are some bugs in the code. For example,
numbers.num2 = ("num2").val();
is wrong because you have to use sign $
to access the jquery object.
numbers.num2 = $("num2").val();
Also, sum
numbers is a concatenation of numbers because you forgot to convert to a number using a function parseInt()
or other methods.
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>
source to share
There are several problems with the code:
-
You are missing jQuery
$
and missing#
from the element selector.$("#num1").bind("keyup mouseup", function(){ numbers.num1 = $("#num1").val(); }); $("#num2").bind("keyup mouseup", function(){ numbers.num2 = $("#num2").val(); });
-
You haven't converted numbers to numbers. Input values are treated as strings, so you need to convert them to a number for JavaScript to evaluate them correctly:
$("#num1").bind("keyup mouseup", function(){ numbers.num1 = parseInt($("#num1").val(), 10); }); $("#num2").bind("keyup mouseup", function(){ numbers.num2 = parseInt($("#num2").val(), 10); });
(the second argument to the function parseInt
is the radius, which in this case is 10).
source to share