www.webdeveloper.com
Results 1 to 10 of 10

Thread: Make a button counter

Hybrid View

  1. #1
    Join Date
    Mar 2010
    Posts
    2

    Make a button counter

    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.

  2. #2
    Join Date
    Jun 2009
    Location
    Miami
    Posts
    118
    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.

  3. #3
    Join Date
    Mar 2010
    Posts
    2,803
    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" />

  4. #4
    Join Date
    Mar 2010
    Posts
    2
    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.

  5. #5
    Join Date
    Mar 2010
    Posts
    2,803
    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.
    Last edited by tirna; 03-15-2010 at 05:37 PM.

  6. #6
    Join Date
    Jul 2010
    Posts
    1

    @tirna

    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

  7. #7
    Join Date
    Nov 2012
    Posts
    3
    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.

  8. #8
    Join Date
    Dec 2012
    Posts
    1
    If I try to use the above script inside a <form> tag it doesn't work.
    Any suggestions?
    Thanks,

  9. #9
    Join Date
    Feb 2013
    Posts
    1

    Count goes to zero every time page is refreshed?

    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

  10. #10
    Join Date
    Feb 2013
    Posts
    1
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles