jQuery: Time between the two click events on a paragraph

Last update on August 19 2022 21:50:45 (UTC/GMT +8 hours)

jQuery Events : Exercise-14 with Solution

Count the number of milliseconds between the two click events on a paragraph.

Sample Data :

<body>
<h1>Heading1</h1>
<h2>Heading2</h2>  
<p>Paragraph</p>
<button>Button</button>
<div id="log"></div>  
</body>

Solution:

HTML Code :

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
 <meta charset="utf-8">
 <title>Count the number of milliseconds between the two click events on a paragraph</title>
 </head>
 <body>
 <p>Count the number of milliseconds between the two click events on a paragraph </p>
   <div>Click on the above paragraph</div>
   </body>
   </html>

JavaScript Code :

var lastt, tdiff;
$( "p" ).click(function( event ) {
  if (lastt) {
  tdiff = event.timeStamp - lastt;
  $( "div" ).append( "Time since last event: " + tdiff + "<br>" );
   } 
   else {
     $( "div" ).append( "<br>Click again.<br>" );
	   }
	 lastt = event.timeStamp;
	});

Live Demo:

See the Pen jquery-events-exercise-14 by w3resource (@w3resource) on CodePen.

Contribute your code and comments through Disqus.

Previous: Display the tag's name on click.
Next: Display the event type on clicking all h1 elements.