So I'm trying to create a counter using jQuery but I can't get it to work for some reason. I'm using 3 inputs. 1 number input and 2 buttons.
My html looks like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="title">
<div id="middle">
<div id="inner">Books</div>
</div>
</div>
<input class="counter" type="number" value="0"></input>
<input class="red" type="submit" value="-"></input>
<input class="green" type="submit" value="+"></input>
<script type="text/javascript" src="jquery-1.11.10.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
And this is my jQuery code:
$(document).ready(function(){
var num = 0;
$(".red").click(function(){
num = $(".counter").val();
num = num - 1;
$(".counter").val(num);
})
$(".green").click(function(){
num = $(".counter").val();
num = num + 1;
$(".counter").val(num);
})
}
I can't seem to find what's wrong with my code.
So I'm trying to create a counter using jQuery but I can't get it to work for some reason. I'm using 3 inputs. 1 number input and 2 buttons.
My html looks like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="title">
<div id="middle">
<div id="inner">Books</div>
</div>
</div>
<input class="counter" type="number" value="0"></input>
<input class="red" type="submit" value="-"></input>
<input class="green" type="submit" value="+"></input>
<script type="text/javascript" src="jquery-1.11.10.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
And this is my jQuery code:
$(document).ready(function(){
var num = 0;
$(".red").click(function(){
num = $(".counter").val();
num = num - 1;
$(".counter").val(num);
})
$(".green").click(function(){
num = $(".counter").val();
num = num + 1;
$(".counter").val(num);
})
}
I can't seem to find what's wrong with my code.
Share Improve this question asked Feb 5, 2014 at 19:18 RorrimRorrim 151 gold badge2 silver badges6 bronze badges 1-
remove these:
num = $(".counter").val();– Malk Commented Feb 5, 2014 at 19:22
3 Answers
Reset to default 4Here I have use +, which Force the engine to implicitly convert it by applying a math operator to it;
Convert input value to number
num = +$(".counter").val();
DEMO
Additionally, You are missing closing ) of document ready handler.
I would also like to suggest you should use type="button" instead of type="submit"
The reason it's failing is because the val() is returned as a string and the + is doing string concatenation, not addition.
However, since you already have the value stored in a variable, you really don't need to pull the value from the input each time. Here's a simpler version:
http://jsfiddle/bcHWa/
var num = 0;
$(".red").click(function () {
$(".counter").val(--num);
})
$(".green").click(function () {
$(".counter").val(++num);
})
num = $(".counter").val(); is going to be a string, therefore "1" + "1" = "11"
Try:
num = parseInt($(".counter").val());