CODEWITHSUNDEEP
javascripthtmlbuttoncount
user4277482
user4277482

Reputation:

Click Counter for HTML Button

I'm trying to find a way to track how many times a button has been pressed on a website.

It's working so far, but it resets every time when user refreshes the website.

Is there a way to prevent it from resetting?

Here's what I have:

<button onclick="Test()" id="counter">Check</button>
<p>This program has been run <span id="displayCount">0</span> times.</p>

<script type="text/javascript">
      var count = 0;
      var button = document.getElementById("counter");
      var display = document.getElementById("displayCount");

      button.onclick = function(){
        Test()
        count++;
        display.innerHTML = count;
      }
    </script>

Upvotes: 2

Views: 4517

Answers (3)

David Augustus
David Augustus

Reputation: 420

You can use websockets to keep data updated for all users online at page, this could cound how many clicks button had, for all users online, counting after page is loaded. For ex: I load the page, click 2 times, so if you load page now, you see 0, and if you were at the page, you can see 2. Thats fantastic techonology i have an app at Facebook called Aplicativo Desenhe, that uses it .

But. For save all clicks, of all the time, from all users, you need save it to server, can use for example, a flat file database, or a TXT file, that saves the data.. So everytime someone clicks, you run a function to post +1 at the flat file. THis could fail on many users together, so its better use sql so you can save all data, better .

Need to define better the needs. If you want to count only clicks from a user, and display it for that user, you can use, localstorage or cookies, but this obviously would display that could only for that session , browser , device and so on.

I had tested it, using Facebook API on a Game, that had a counter, all users need to click, to get points, and so you could see clicks from all your friends, updating on realtime, on a leaderboard, was awesome!!!!!!! It was called Social CLicker i dont dnow where is the code now .

Facebook API can count using scores, you could use it also, maybe, i dont know .

I hope this helps .

Upvotes: 0

Indranil Mondal
Indranil Mondal

Reputation: 2857

Try to use localstorage if you want to maintain the count in the client side:-

<script type="text/javascript">
  var count;
  var button = document.getElementById("counter");
  var display = document.getElementById("displayCount");
   if( window.localStorage.getItem('clickCount')){
     count =  window.localStorage.getItem('clickCount');
   }else{
      count = 0;
    }
   display.innerHTML = count;
  button.onclick = function(){
    Test()
    count++;
     window.localStorage.setItem('clickCount',count);
    display.innerHTML = count;
  }
</script>

But if there is something like, if one user clicks the click counter will be updated for every user or if the user opens the website in separate browser or device the counter will be same, then you have to send the counter to the server.

Upvotes: 2

Madhu
Madhu

Reputation: 132

you can use session/local storage for storing the count. check the below example of storing the click count of a button http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webstorage_session

Upvotes: 0

Related Questions