Page Loading...
Run
Break Lines
Result
<!DOCTYPE html> <html> <head> <style> .para{ background-color: yellow; padding: 10px; } </style> </head> <body> <h2>Click on the below paragraphs:</h2> <div> <p class="para">This is first paragraph</p> <p class="para">This is second paragraph</p> <p class="para">This is third paragraph</p> </div> <script> // Fetch all elements having class para let elements = document.querySelectorAll('.para'); // Loop through the elements array // and attach a click event listener to each one for(let i=0;i<elements.length;i++){ elements[i].addEventListener('click', function(event){ // Alert on click alert('You have clicked: '+ event.target.innerText); }); } </script> </body> </html>