How to count number of clicks in jquery
In order to count number of clicks in jquery, we use click() method.
It binds an event handler to the button press or click JavaScript event, or trigger that event on an element. HTML element will receive this element.
<!DOCTYPE html>
<html>
<head>
<title> Click Counter </title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<center>
<h1> Show Some Love!! Click on this lovely Cat </h1>
<hr>
<div id="target">
<img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2018/03/Scottish-Fold_01.jpg" width="600" height="400"/>
</div>
<hr>
<h3> Noumber of Clicks/ Love</h3>
<div>
<h2 id="counter"> </h2>
</div>
</center>
<script>
var count=0;
$( "#target" ).click(function() {
count=count+1;
$("#counter").html(count);
});
</script>
</body>
</html>
 |
| How to count number of clicks in jquery |
Click Method:
It binds an event handler to the button press or click JavaScript event, or trigger that event on an element. HTML element will receive this element.
Variations:
.click( handler )
handler
Type: Function( Event eventObject )
A function to execute each time the event is triggered.
version added: 1.4.3.click( [eventData ], handler )
eventData
Type: Anything
An object containing data that will be passed to the event handler.
handler
Type: Function( Event eventObject )
A function to execute each time the event is triggered.
version added: 1.0.click()
This signature does not accept any arguments.
count the number of clicks jquery
var count=0;
$( "#target" ).click(function() {
count=count+1;
$("#counter").html(count);
});
Example code for above screenshot:
<!DOCTYPE html>
<html>
<head>
<title> Click Counter </title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<center>
<h1> Show Some Love!! Click on this lovely Cat </h1>
<hr>
<div id="target">
<img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2018/03/Scottish-Fold_01.jpg" width="600" height="400"/>
</div>
<hr>
<h3> Noumber of Clicks/ Love</h3>
<div>
<h2 id="counter"> </h2>
</div>
</center>
<script>
var count=0;
$( "#target" ).click(function() {
count=count+1;
$("#counter").html(count);
});
</script>
</body>
</html>
1 comment