Make a button counter

**gberg927** · 03-14-2010 10:10 PM

Hello,
I am somewhat new to javascript but I hope you can help me out.

What I am looking to do, is make an image clickable, and when the image is clicked it increases a counter. Pretty much I want to know how many times the button has been clicked. It would be great if this was all done real time as well. If anyone has any ideas I would greatly appreciate that.

**mavigozler** · 03-15-2010 02:04 AM

ECMAscript (JavaScript) does all its operations on the client-side, so if you are operating a server, you need to set up a persistent connection or session with the user's browser and have the click events sent to you, where you likely operate the counter from the server end.

Your best bet is to set up a simple Ajax interface, which does the client->server transmission of information, where you can be informed of the click events and then record them in your database as needed.

**tirna** · 03-15-2010 04:27 AM

The following should do what you want:

Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var count = 0;
function countClicks() {
 count = count + 1;
    document.getElementById("p2").innerHTML = count;
}
</script>

</head>
<body>
<p>
<a href="javascript:countClicks();">Count Clicks</a>
</p>

<p id="p2">0</p>

</body>
</html>

For a clickable image to run the counter subsitute the <a> with something like:

Code:

<img onclick="javascript:countClicks();" src="yourPic.jpg" alt="alt text" />

**gberg927** · 03-15-2010 09:24 AM

Hey tirna,
That is almost exactly what I need. The intention is to keep how many times the button is clicked from everyone, so the variable would need to be global. and increase for every person that is on the page.
Not sure if there is something I should do to keep this server side.

**tirna** · 03-15-2010 05:35 PM

ok no problem.

It wasn't clear, to me at least, from your initial post that you wanted a cumulative counter of all visitors' image clicks.

If you want to hide from your visitors the fact that you are counting their clicks then you could do the following:

1) Put an onclick javascript function on the image that will send an ajax request to a server side script.

2) The server side script then retrieves the current value of the counter from a database, increments it by 1 and then writes the new value back to the database.

3) You can then do whatever you need to do with the counter value in the db.

Using Ajax, you could run into problems with high traffic, rapid ajax requests from multiple users resulting in your db being bombarded. So beware of that possibility.

If you don't want to use ajax you could do the following:

1) Put the image in a html form with action="serverscriptiin2above"

But doing this the user will be aware something is going on as a result of whatever your server side script does after it updates the counter...ie..redirects back to the original web page or whatever.

**emekaryan** · 07-28-2010 07:10 PM

hEY. i FOUND YOUR CODE VERY USEFUL. I WAS WONDERING IF THERE WAS ANYWAY THE COUNTER CAN BE EDITED SO THAT IT IS ON THE SIDE OF THE BUTTON AND CLOSE TOO
AS OPPOSED TO BEING ON THE BOTTOM AND WAY DOWN?
YOU ARE AWESOME

**kranthi123** · 11-02-2012 07:11 PM

Hi tirna,

i have simalr requirement to implement, could you please share the code for same. i have one button and i want know how many times it was clicked and store it session and it can be used in jsp.

**bubulac** · 12-21-2012 10:19 PM

If I try to use the above script inside a <form> tag it doesn't work.
Any suggestions?
Thanks,

**DamonScott33** · 02-10-2013 04:46 PM

Can anyone just post a code just like the ones above that when the page is refreshed the count won't reset to zero?

Also is there a way someone can make something like the following button clicker at www.Squeeze1.com

**KnitsKnacks** · 02-16-2013 07:16 PM

I am a knitter, and an android user. I need, and haven't been able to find, an app that I can use on my tablet and phone and be shown the same data from the last update on whatever device.

My ultimate goal would be to have a page where I can add/delete/select projects and then go to the associated counter.

I haven't practiced what JS/PHP I learned a few years back so trying to jump back in is just a little difficult. At the moment I have some goofy looking html/css but I'm not sure how to implement my functions from my external file. When the "+" button is clicked I'd like to see the Row/repeat number increase by 1 and subtract 1 for everytime the "-" button is clicked. However, what I have right now doesn't update when the buttons are clicked. For the time being I'm playing with the Row counter so that I can implement the same code for the repeat counter. Please pardon the design bugs for now, I'm looking for getting my functionality going and would like to just see it work already! I uploaded my code here for those that would like to see what I have: http://thedevplace.info/counter/counter.php

Once I do get it working, I could also use some advice on what to do next in terms of making this work across several devices. I assume I'd have to generate and query a database but getting data in/out etc would be another issue I'll have to cross.

Thread: Make a button counter

Thread Tools

Display

Make a button counter

@tirna

Count goes to zero every time page is refreshed?

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions