I cannot seem to get the jQuery bit I need to work. I've never used jQuery before, but I'd like to have a button on my page that, when clicked, increments an initially 0 value by one. My question is similar to jQuery - Increase the value of a counter when a button is clicked and press button and value increases in text box but I can't make sense of what I'm doing wrong. Here's what I have:
<html>
<head>
<script type="text/javascript" src=".4.3.min.js"></script>
<script type="text/javascript">
$("#update").click(function()
{
$("#counter")++;
}
</script>
</head>
<body>
<input type="text" name="TextBox" id="TextBox" value="0" />
<input type="Button" id='AddButton' value="+" />
<script type="text/javascript" src=".4.3.min.js"></script>
<script type="text/javascript">
$('#AddButton').on('click', function ()
{
var input = $('#TextBox');
input.val(parseInt(input.val()) + 1);
})
</script>
</body>
</html>
Any help is greatly appreciated. Please forgive any huge glaring mistakes, I have no idea how to do any of this yet. Thank you, and happy tidings! =)
I cannot seem to get the jQuery bit I need to work. I've never used jQuery before, but I'd like to have a button on my page that, when clicked, increments an initially 0 value by one. My question is similar to jQuery - Increase the value of a counter when a button is clicked and press button and value increases in text box but I can't make sense of what I'm doing wrong. Here's what I have:
<html>
<head>
<script type="text/javascript" src="http://code.jquery./jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$("#update").click(function()
{
$("#counter")++;
}
</script>
</head>
<body>
<input type="text" name="TextBox" id="TextBox" value="0" />
<input type="Button" id='AddButton' value="+" />
<script type="text/javascript" src="http://code.jquery./jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$('#AddButton').on('click', function ()
{
var input = $('#TextBox');
input.val(parseInt(input.val()) + 1);
})
</script>
</body>
</html>
Any help is greatly appreciated. Please forgive any huge glaring mistakes, I have no idea how to do any of this yet. Thank you, and happy tidings! =)
Share Improve this question edited May 23, 2017 at 12:30 CommunityBot 11 silver badge asked Jul 14, 2013 at 14:06 ProgrammerProgrammer 3773 gold badges5 silver badges12 bronze badges 3-
where are the elements
updateandcounter? and why do you have jquery two times included? – Marko Vranjkovic Commented Jul 14, 2013 at 14:12 -
$("#counter")returns a handle to the (wrapped) DOM element whose Id is "counter". That element may have a numeric property that could be incremented, but the element itself is not a number, and so you cannot increment it. – Tim Commented Jul 14, 2013 at 14:14 - 1 Why downvote ? Ok, there are mistakes but honestly the Q&A format is respected, there's code... We can help guide people to understand and better themselves, after all isn't this what STO is all about ? – Akheloes Commented Jul 14, 2013 at 14:53
4 Answers
Reset to default 6It's clear you're new to jQuery, so a good read might be of help to you, I would remand Head First jQuery.
As for the question, I rewrote your code, here's what it should be like :
<!DOCTYPE html>
<html>
<head>
<title> My first increment </title>
</head>
<body>
<input type="text" name="TextBox" id="TextBox" value="0" />
<input type="Button" id='AddButton' value="+" />
<script src="http://code.jquery./jquery-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$('#AddButton').click( function() {
var counter = $('#TextBox').val();
counter++ ;
$('#TextBox').val(counter);
});
});
</script>
</body>
</html>
Here is a little test : test me
The idea is to increment a variable not an object, and you have some syntax mistakes as well, but try this code and we can discuss it further on ments.
Best of luck.
(This is merely a supplement to other answers)
You only need to load this once before all other js srcs:
<script type="text/javascript" src="http://code.jquery./jquery-1.4.3.min.js"></script>
That's a really old jquery version. You can find the latest here.
Almost all jQuery code should be wrapped in
$(document).ready(function(){
});
Do it all of the time until you find a reason not to which is rare for pure jQuery.
Assuming $('#TextBox') can never be changed from the last counter, you might like:
$('#TextBox').val(0);
$('#AddButton').click( function() {
$('#TextBox').val(parseInt($('#TextBox').val()) + 1);
});
but if you want TextBox to be changed by the user then set back to the incrememented counter whenever AddButton's clicked, assuming counter should start at 0:
counter = 0;
$('#AddButton').click( function() {
counter++;
$('#TextBox').val(counter);
});
It should be:
var counter = 0;
$("#update").click(function()
{
counter++;
});
Demo for this here.
If counter is a variable you need to define it (var counter;) and you forgot also to close the click ")". Notice the extra ) in the end. What you were doing was increment a jQuery object (good idea to explain Ohgodwhy).
In case what you want is to put the value in another field (and now I am guessing a bit), like an input field, you can do this:
var val;
$("#update").click(function()
{
val = $('#counter').val();
val++;
$('#counter').prop('value',val )
});
Demo for this here.
This can be done using plain html and JS, Attaching the code below
<b>
<button id="btn" onclick="this.innerHTML=++this.value" value=0 >0</button>
</b>