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>
This question is related to
javascript
jquery
button
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.
It's just
var counter = 0;
$("#update").click(function() {
counter++;
});
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.
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++);
$(document).ready(function() {
var count = 0;
$("#update").click(function() {
count++;
$("#counter").html("My current count is: "+count);
}
});
<div id="counter"></div>
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>
Source: Stackoverflow.com