Count clicks on element with JavaScript

Question

Hey guys am new to javascript.I was wondering about how can i get the number of clicks in a paragraph with the onClick method in javascript.

The code i have used is

<html>
<body>
<p id="avalue"> kdfbkjdf </p>
<script>


var a = document.getElementById('avalue');
a.onClick = function(b) {
console.log(b);
}


</script>
</body>
</html>

This code doesnt show any errors but when i clicked the paragraph i didnt get the clicked numbers.

How can i acheive with onclick method ??..

Any help would be appreciated

You need a counter variable.

j08691
– j08691

2014-11-26 16:09:11 +00:00
Commented Nov 26, 2014 at 16:09 — j08691
– j08691, Commented Nov 26, 2014 at 16:09
You have a typo. Your onClick should be onclick.

six fingered man
– six fingered man

2014-11-26 16:11:18 +00:00
Commented Nov 26, 2014 at 16:11 — six fingered man
– six fingered man, Commented Nov 26, 2014 at 16:11

Amit Joki · Accepted Answer · 2014-11-26 16:22:51Z

5

You need to maintain an external variable to work as a counter and increment it in the handler

var clicks = 0; // counter 
var a = document.getElementById('avalue'); // element
a.onclick = function(b) { // onclick not onClick
   console.log(++clicks); // increment it
}

From your comment, you could do this

a.ondblclick = function(){
   alert(clicks); // double click to know the number of clicks so far
}

edited Nov 26, 2014 at 16:22

answered Nov 26, 2014 at 16:09

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lovemysql Over a year ago

but i get the value 0 instead of their sum

Amit Joki Over a year ago

@lovemysql click for sometimes and then double click

hon2a · Accepted Answer · 2014-11-26 16:24:11Z

4

Save your click counter in the element's data to avoid the "need" for a global variable:

document.getElementById('avalue').addEventListener('click', function (event) {
    var element = event.currentTarget;
    element.clicks = (element.clicks || 0) + 1;
    console.log(element.clicks);
});

and access it anytime under document.getElementById('avalue').clicks.

edited Nov 26, 2014 at 16:24

answered Nov 26, 2014 at 16:11

hon2a

7,2545 gold badges47 silver badges60 bronze badges

5 Comments

six fingered man Over a year ago

I think it's a good idea to store the primitive data on the element, but you should probably put it on the bound element instead of the event.target just in case he adds nested elements.

hon2a Over a year ago

Thanks. I'll change it to currentTarget.

Patrick E. Over a year ago

Good call with the addEventListener, hon2a

lovemysql Over a year ago

@hon2a wow really thanx ..can you tell me how can i find the total of the onclick ..suppose if i clicked one time it shows 1 and if i clicked again it shows two..how can i get the whole sum ??..any ideas

hon2a Over a year ago

The number of clicks is (in my code sample) saved in the click property right on the HTMLElement. So you can get it anytime by document.getElementById('avalue').clicks.

Scimonster · Accepted Answer · 2014-11-26 16:17:19Z

1

You need a counter that you increment each time it's clicked:

var b = 0;
var a = document.getElementById('avalue');
a.onclick = function() {
console.log(++b);
}

edited Nov 26, 2014 at 16:17

answered Nov 26, 2014 at 16:09

Scimonster

33.4k10 gold badges79 silver badges92 bronze badges

3 Comments

lovemysql Over a year ago

wow really thanx ..can you tell me how can i find the total of the onclick ..suppose if i clicked one time it shows 1 and if i clicked again it shows two..how can i get the whole sum ??..any ideas

Scimonster Over a year ago

That's what b will be.

six fingered man Over a year ago

@lovemysql: If you're not sure, then I really recommend taking a step back and reading through some basic JavaScript tutorials. If you just spend a couple days doing that, you'll have the majority of your questions answered. Eloquent JavaScript ... Learn JavaScript

Gerton · Accepted Answer · 2014-11-26 16:10:47Z

0

var a = document.getElementById('avalue');
var b = 0;
a.onClick = function(b) {
    b++;
    console.log(b);
}

Change it to this and you should be able to see the number.

answered Nov 26, 2014 at 16:10

Gerton

6863 silver badges14 bronze badges

Collectives™ on Stack Overflow

Count clicks on element with JavaScript

4 Answers 4

2 Comments

5 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

5 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related