Click Count with JavaScript | SJB -->

This website uses cookies to ensure you get the best experience. More info...

Pages

Click Count with JavaScript


Button was clicked - 0 - times.

     The above click event can easily be triggered by a little script. We can use that for our blog or in web game to collect click. Check out the following script_
1
2
3
4
5
6
7
8
9
10
11
var count = 0;
var countButton = document.getElementById("countButton");
var displayCount = document.getElementById("displayCount");
countButton.onclick = function() {
  count++;
  displayCount.innerHTML = count;
}
resetButton.onclick = function() {
  count = 0;
  displayCount.innerHTML = count;
}
     Here we used getElementById() to get certain elements and set an onClick() attribute and incremented the count number. This the most easiest way to get this task done. However, there are so many other ways too.

     Another approach will be storing count data locally. We can tore data inside of the browsers to make the process fast. I like to use localStorage in this case. Take a look at the script below_   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$("#countButton").on('click', function(e) {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcount) {
      localStorage.clickcount = parseInt($("#displayCount").text());
      localStorage.clickcount = Number(localStorage.clickcount) + 1;
    } else {
      localStorage.clickcount = 0;
    }
    document.getElementById("displayCount").innerHTML = localStorage.clickcount;
  } else {
    document.getElementById("displayCount").innerHTML = 0;
  }
});
$("#resetButton").on('click', function(e) {
  localStorage.clickcount = 0;
  document.getElementById("displayCount").innerHTML = localStorage.clickcount;
});
     I prefer to use localStorage. Most of the major browsers support it. At some point, before HTML5, only options was using cookies to store data. Performance was not as smooth as local storage. Even storage limit wasn't that big, where local storage can store up to 5MB as per today. Local storage is more secure and doesn't have any impact on browser's performances. Just to keep in mind, localStorage is kind of object that stores data without any expiration date. So, data will not be deleted when the browser is closed, and will be available the next day, week, or year. On the other hand, sessionStorage can also store data and will be vanished once the browser tab is closed. 
For adding more fun, play with these buttons below_


We are counting how many times the first button is hovered. Hovering over RESET button will set the count to it's initial state. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
  <script>
    var hoverCount = 1;
  </script>
</head>
<body>
  <div style="text-align: center;">
    <button class="hoverButton" type='button' 
      onmouseover='alert ("Hovered " + hoverCount +" times."); 
      ++hoverCount'>HOVER COUNT
    </button>
    <button class="hoverButton" type='button' 
      onmouseover='alert ("Hover count is cleared."); 
      hoverCount = 1'>RESET COUNT
    </button>
  </div>
</body>
</html>
Yep, we set onmouseover attribute to the button to popup an alert.
Posted at
Labels:

No comments:

Post a Comment