Geek Answers Handbook

How to count clicks using javascript?

Is it possible to count clicks on links with javascript?

+4
source share
8 answers

You can count clicks within a single request (for example, how many times the button is clicked after the page loads). You cannot count clicks on requests (after loading another page or reloading the current page).

Example:

<script type="text/javascript">var clicks = 0;</script> <input value="Click" type="button" onclick="clicks++">

UPDATE

You can also use the following (using jQuery) to save it using cookies, as recommended by others:

 onclick="$.cookie('clicks', $.cookie('clicks') + 1);"
+7
source

Of course, add the onclick event handler function to the <a> tag, which retrieves, increments, and stores the counter variable. You can restore and save this in a hidden field. However, you will lose information after you go from the page.

+2
source

You can count all clicks on links to a page using this script:

 // This variable contains the number of clicks corresponding to the linked URLs var clickCount = {} // List of all a tags , aList = document.getElementsByTagName('a') // Function called every time a link is clicked on , clickCounter = function() { clickCount[this.href] = clickCount[this.href] ? clickCount[this.href]+1 : 1; } ; // The event is attached to every link having a "href" attribute for (var i=0 ; i<aList.length, a=aList[i] ; i++) { if (this.href) { a.onclick = clickCounter; } } // This example uses jQuery to send the data to a PHP  // A POST request is sent just before the window is closed onbeforeunload = function() { $.post('/tracking.php', clickCount); }

PS: I’m not worried about anchor links, as tracking them may be of some interest. If you do, just check if a.href contains location.href + '#' in the for loop.

+1
source

You should consider these requests to be server requests, either directly from the web server logs, or from code that allows ?id=1234 to load the actual content.

Do not consider requests from the author of the page to which you gave the identifier, provided that you have a way to tell (login, cookie, IP address). This part will be easier from your code, not server logs.

+1
source 
 <script type="text/javascript"> var clicks = 0; function linkClick() { document.getElementById('clicked').value = ++clicks; } document.write('<a href="#" onclick="linkClick()">Click Me!</a>');

You clicked on the link.

+1
source

Presumably, you are trying to see how many links on a page a user clicked to see which ones they visited. This is an unreliable strategy, as users can visit links in various ways without clicking on them (context menu, drag to a new tab, copy the location of the link, etc.).

If you want to know how many links they clicked on the current page, the answer is zero, because if they click on the link, they must go to another page. If you use a listener to prevent navigation, the same listener can also count clicks.

0
source

Here is a simple click counter with a margin of 200ms between clicks. In this example, I did this after three subsequent clicks:

 var onClick = (function(){ var count = 0, timer; return function(){ count++; clearTimeout(timer); timer = setTimeout(function(){count = 0}, 200); // do whatever after 3 clicks if( count > 2 ) document.body.classList.toggle('mode'); } })(); document.body.addEventListener("click", onClick); 
 html, body{ height:100%; } body{ font:20px Arial; text-align:center; padding:20px; background:#EFDCE8; transition:.3s; -moz-user-select:none; -webkit-user-select:none; } body.mode{ background:lightgreen; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> Click anwhere 3 times </body> </html>
0
source

I created a click counter with local storage so that it can store the number of clicks.

 <html> <body> <a href="#" onclick="clickCounter()" type="button">Click Counter</a> <a href="#" onclick="resetCounter()" type="button">Reset Counter</a> <br> <p id="result"></p> <script> function clickCounter() { var count = localStorage.clickcount = Number(localStorage.clickcount)+1; if (isNaN(count) === true) { count = localStorage.clickcount = 1; document.getElementById("result").innerHTML = count; } else { document.getElementById("result").innerHTML = count; } } function resetCounter() { var reset = localStorage.clickcount = 0; document.getElementById("result").innerHTML = reset; } </script> </body> </html>
0
source

More articles:


All Articles