How do you set a JavaScript onclick event to a class with css

Question

Let's say I want that every time the user click any link an alert pops up that says "hohoho". Do I need to add onclick="alert('hohoho')" to every link or can I set this with CSS so that it works with every link?

Answer 1

You can't do it with just CSS, but you can do it with Javascript, and (optionally) jQuery.

If you want to do it without jQuery:

<script>     window.onload = function() {         var anchors = document.getElementsByTagName('a');         for(var i = 0; i < anchors.length; i++) {             var anchor = anchors[i];             anchor.onclick = function() {                 alert('ho ho ho');             }         }     } </script> 

And to do it without jQuery, and only on a specific class (ex: hohoho):

<script>     window.onload = function() {         var anchors = document.getElementsByTagName('a');         for(var i = 0; i < anchors.length; i++) {             var anchor = anchors[i];             if(/\bhohoho\b/).match(anchor.className)) {                 anchor.onclick = function() {                     alert('ho ho ho');                 }             }         }     } </script> 

If you are okay with using jQuery, then you can do this for all anchors:

<script>     $(document).ready(function() {         $('a').click(function() {             alert('ho ho ho');         });     }); </script> 

And this jQuery snippet to only apply it to anchors with a specific class:

<script>     $(document).ready(function() {         $('a.hohoho').click(function() {             alert('ho ho ho');         });     }); </script> 

Answer 2

You can do this by thinking of it a little bit differently. Detect when the body is clicked (document.body.onclick - i.e. anything on the page) and then check if the element clicked (event.srcElement / e.target) has a class and that that class name is the one you want:

document.body.onclick = function(e) {   //when the document body is clicked     if (window.event) {         e = event.srcElement;           //assign the element clicked to e (IE 6-8)     }     else {         e = e.target;                   //assign the element clicked to e     }      if (e.className && e.className.indexOf('someclass') != -1) {         //if the element has a class name, and that is 'someclass' then...         alert('hohoho');     } } 

Or a more concise version of the above:

document.body.onclick= function(e){    e=window.event? event.srcElement: e.target;    if(e.className && e.className.indexOf('someclass')!=-1)alert('hohoho'); }