jQuery - Increase the value of a counter when a button is clicked

Posted by Taimur on Stack Overflow See other posts from Stack Overflow or by Taimur
Published on 2011-01-15T18:22:34Z Indexed on 2011/01/15 18:53 UTC
Read the original article Hit count: 207

Filed under:
|
|

Hi,

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>

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery