CODEWITHSUNDEEP
javascriptjquery
Programmer
Programmer

Reputation: 377

Increase counter value upon button click

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! =)

Upvotes: 1

Views: 44841

Answers (4)

Jithendranath Gupta
Jithendranath Gupta

Reputation: 169

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>

Upvotes: 0

user1382306
user1382306

Reputation:

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

Upvotes: 2

Akheloes
Akheloes

Reputation: 1372

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.

Upvotes: 6

Sergio
Sergio

Reputation: 28845

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.

Upvotes: 0

Related Questions