Increase counter value upon button click

Question

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.com/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.com/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! =)

where are the elements `update` and `counter`? and why do you have jquery two times included? — Marko Vranjkovic, Jul 14 '13 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, Jul 14 '13 at 14:14
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, Jul 14 '13 at 14:53

Akheloes · Accepted Answer · 2013-07-14T15:23:39.703

It's clear you're new to jQuery, so a good read might be of help to you, I would recommand 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.com/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 comments.

Best of luck.

Thank you very much, it works! :D I'll check up on Head First jQuery. Is there a way to make the value persistent for all users who see the page? Would I have to connect it to a database somehow? — Programmer, Jul 14 '13 at 21:16
Yeah, I think as soon as you close the page (a view), the counter value will be lost unless you stock it in a DB. To connect to DB with jQuery you'll have to go with ajax :) — Akheloes, Jul 14 '13 at 21:49

score 2 · Answer 2 · 2013-07-14T16:37:21.687

2

(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.com/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);
});

edited Jul 14 '13 at 16:37

answered Jul 14 '13 at 15:39

`this` will refer to `#AddButton`, will it not ? – Akheloes Jul 14 '13 at 16:08
@Gloserio i hate `this`. was just trying to be cool. will change for 100% surety. but still pretty sure it changed to `TextBox` since i do it for `type=check`s all the time. – Jul 14 '13 at 16:11
Haha, sorry man, but I was kind of asking the question because I was dubious and wanted some confirmation. `this` inside an event will point to the component firing it ( unless I am mistaken ). Otherwise I tried `$('#TextBox').val($('#TextBox').val()++);` on jsFiddle but it doesn't work, why is that in your opinion ? – Akheloes Jul 14 '13 at 16:16
@Gloserio thought i could get away with not using `parseInt`. guess not. ditching the increment too. edit number 3... – Jul 14 '13 at 16:19
1

Actually, you could, but it's not about that, its the `++` following the `$('#TextBox').val()` statement, it doesn't like it for some reason... Here try this http://jsfiddle.net/hsAsU/3/ , uncomment one piece of code at time and notice the difference. – Akheloes Jul 14 '13 at 16:23
Hihi...now its working just fine and you got it all in one line (programmers poetry, sort of...). Otherwise good explainatory answer, now I can +1 you since you got it all together :p ! – Akheloes Jul 14 '13 at 16:27
1

@Gloserio that's so weird that `++` can't be done inline. is that the only function that can't be? lol. +1 for you sticking up for beginner. i remember those days... – Jul 14 '13 at 16:28
1

Yeah, that's actually weird the `++` doesn't work.. If I find out why I'll let you know. (hard days indeed...) – Akheloes Jul 14 '13 at 16:30
1

http://stackoverflow.com/questions/17641480/inline-in-jquery-not-working/17641595?noredirect=1#17641595 , check this out ! Actually, we kind of were quite the blind ones lool... – Akheloes Jul 14 '13 at 17:13
@Gloserio oh, it's on now! ;)) http://stackoverflow.com/a/3469896/1382306 i tried to preincrement, but that didn't work. guess `$.val()` can't be incremented. think it's in the chk n ur link – Jul 14 '13 at 17:35
Well, preincrement or postincrement will equally not work @Gracchus. It's simply that `parseInt($('#TextBox').val())` is a value, and you can't increment a value, you can only increment a variable (of which a value will be incremented). We missed that :D but now we know ;) – Akheloes Jul 14 '13 at 17:46

Sergio · Answer 3 · 2013-07-14T14:28:50.880

0

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.

edited Jul 14 '13 at 14:28

answered Jul 14 '13 at 14:10

Sergio

28,539
11
85
132

1

And the reason for this is that you can't increment a jQuery object, which is what OP was doing. – Ohgodwhy Jul 14 '13 at 14:11

score 0 · Answer 4 · answered Aug 14 '18 at 15:40

0

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>

answered Aug 14 '18 at 15:40

Jithendranath Gupta

139
1
1
7

Increase counter value upon button click

4 Answers4

Linked