38

I'm making a system where a user clicks a button and their score increases. There is a counter which I would like to increase the value of using jQuery (so that the page does not need to refresh) when the button is clicked.

How would I go about this?

<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>

#update is the button, #counter is the counter.

In php, ++ increases something's value. What's the jQuery equivalent?

Also, when the button is clicked, it needs to send a request which updates the score value in a mysql database as well, without the page refreshing. Does anyone know how I would do that?

Thanks a lot

UPDATE:

I've tried a few of the methods below, but nothing seems to work! Do I need to change anything else for it to work? I've created a test page for it:

<html>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">

var count = 0;

$("#update").click(function() {
    count++;
    $("#counter").html("My current count is: "+count);
}

</script>
<button id="update" type="button">Button</button>
<div id="counter">1</div>
</body>
</htlm>
6
  • #counter is the counter: Is it an element containing a number or what? Commented Jan 15, 2011 at 18:39
  • yeah, #counter is a div with a number inside
    – Taimur
    Commented Jan 15, 2011 at 18:47
  • @Taimur your code is not valid. End your click function with }); and not just }. DEMO: jsfiddle.net/marcuswhybrow/Bwdfw Commented Jan 15, 2011 at 18:55
  • I tried that, and I also tried literally copying and pasting your second demo thing, but it is not working :( If it helps, I'm using WAMP server and the test page is a .php page, but I'm pretty sure that doesn't matter
    – Taimur
    Commented Jan 15, 2011 at 18:59
  • Don't know if you solved your problem, but you have to wrap your code in to the document ready handler. Currently jQuery does not find the element with ID #button because it is not parsed yet. Put your code into $(function(){ your code here });. (and the already mentioned missing ); at the end of your click handler passing. What you have is $(..).click(... but you need $(...).click(...);). Commented Jan 15, 2011 at 19:09

7 Answers 7

63

You cannot use ++ on something which is not a variable, this would be the closest you can get:

$('#counter').html(function(i, val) { return +val+1 });

jQuery's html() method can get and set the HTML value of an element. If passed a function it can update the HTML based upon the existing value. So in the context of your code:

$("#update").click(function() {
    $('#counter').html(function(i, val) { return +val+1 });
}

DEMO: http://jsfiddle.net/marcuswhybrow/zRX2D/2/

When it comes to synchronising your counter on the page, with the counter value in your database, never trust the client! You send either an increment or decrement signal to you server side script, rather than a continuous value such as 10, or 23.

However you could send an AJAX request to the server when you change the HTML of your counter:

$("#update").click(function() {
    $('#counter').html(function(i, val) {
        $.ajax({
            url: '/path/to/script/',
            type: 'POST',
            data: {increment: true},
            success: function() { alert('Request has returned') }
        });
        return +val+1;
    });
}
7
  • This works fine in the demo thing, but for some reason, it's not working on my page. In fact, none of the answers are! Is there something I'm missing?
    – Taimur
    Commented Jan 15, 2011 at 18:44
  • Thanks for the reply, regarding the AJAX thing, how does it know whether the function was a success? Also, what does (i,val) do? Thanks
    – Taimur
    Commented Jan 15, 2011 at 18:54
  • @Marcus Consider +val + 1 instead of val * 1 + 1 Commented Jan 15, 2011 at 18:58
  • Take a look at the jQuery docs for AJAX for more details. Any request that returns with HTTP 200 is "successful". jQuery's html() method can accept a callback which is passed two values the index of the current element in the jQuery selector i, and the current HTML value of that element val. Again see the jQuery docs for more information. Commented Jan 15, 2011 at 19:00
  • 1
    if you just copy and paste into what you have currently, almost none of it will work because you're missing jQuery's "ready" function - $(document).ready
    – jpea
    Commented Jan 15, 2011 at 21:52
21
$(document).ready(function() {
var count = 0;

  $("#update").click(function() {
    count++;
    $("#counter").html("My current count is: "+count);
  }

});

<div id="counter"></div>
1
  • you needed to add the document ready function before firing any jQuery code (edited above)
    – jpea
    Commented Jan 15, 2011 at 19:28
10

It's just

var counter = 0;

$("#update").click(function() {
   counter++;
});
8

Several of the suggestions above use global variables. This is not a good solution for the problem. The count is specific to one element, and you can use jQuery's data function to bind an item of data to an element:

$('#counter').data('count', 0);
$('#update').click(function(){
    $('#counter').html(function(){
        var $this = $(this),
            count = $this.data('count') + 1;

        $this.data('count', count);
        return count;
    });
});

Note also that this uses the callback syntax of html to make the code more fluent and fast.

5
  • Not true if there's more than one way of changing the value of count
    – jcuenod
    Commented Jan 15, 2011 at 18:34
  • @j3frea Then encapsulate the code in a plugin. Honestly, this isn't hard to do, and littering your code with global variables is very bad design. Commented Jan 15, 2011 at 18:36
  • Nobody is using global variables, they are just examples. The context is not stated in any answer. Commented Jan 15, 2011 at 18:43
  • Don't forget to initialize the counter beforehand, otherwise it won't work: $('#counter').data('count', 0); Commented Jan 15, 2011 at 18:53
  • @Sime Thanks. I always want undefined to equal 0 in mathematical operations... @Marcus Well, some are. Constraining the context should be an integral part of the answer, in that case. Commented Jan 15, 2011 at 19:00
1

Go to the below site and tryout. http://www.counter12.com/

From the above link I have selected the one design that I liked to have in my site accepted terms and it has given me a div that I have pasted in my html page.

It did awesomely worked.

I am not answering to your problem on JQuery, but giving you an alternate solution for your problem.

0

You are trying to set "++" on a jQuery element!

YOu could declare a js variable

var counter = 0;

and in jQuery code do:

$("#counter").html(counter++);
4
  • You should create a global variable? Really? Commented Jan 15, 2011 at 18:33
  • "You SHOULD" ;) not "you MUST" ..it would be better "you could".. c'mon there are several ways to do this, mine it's just a suggestion!
    – stecb
    Commented Jan 15, 2011 at 18:36
  • Yes, "you could" is the correct form here. "You should" is for recommendations. And no one should recommend creating global variables, the recommendation here is the opposite: one should try to avoid creating global variables. Commented Jan 15, 2011 at 18:42
  • You're absolutely right! "global" word is my bad ;) I apologize
    – stecb
    Commented Jan 15, 2011 at 18:44
0

I'm going to try this the following way. I've placed the count variable inside the "onfocus" function so as to keep it from becoming a global variable. The idea is to create a counter for each image in a tumblr blog.

$(document).ready(function() {

  $("#image1").onfocus(function() {

  var count;

    if (count == undefined || count == "" || count == 0) {
    var count = 0;
    }

    count++;
    $("#counter1").html("Image Views: " + count);
  }
});

Then, outside the script tags and in the desired place in the body I'll add:

<div id="counter1"></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.