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

User · Answer

Here is my solution through CSS  It does not use any JavaScript at all  HTML    lt a href   openModal  gt Open Modal lt  a gt    lt div id  openModal  class  modalDialog  gt           lt div gt     lt a href   close  title  Close  class  close  gt X lt  a gt                    lt h2 gt Modal Box lt  h2 gt                lt p gt This is a sample modal box that can be created using the powers of CSS3  lt  p gt               lt p gt You could do a lot of things here like have a pop-up ad that shows when your website loads  or create a login register form for users  lt  p gt           lt  div gt       lt  div gt    CSS    modalDialog       position  fixed      font-family  Arial  Helvetica  sans-serif      top  0      right  0      bottom  0      left  0      background  rgba 0  0  0  0 8       z-index  99999      opacity 0      -webkit-transition  opacity 400ms ease-in      -moz-transition  opacity 400ms ease-in      transition  opacity 400ms ease-in      pointer-events  none     modalDialog target       opacity 1      pointer-events  auto     modalDialog  gt  div       width  400px      position  relative      margin  10  auto      padding  5px 20px 13px 20px      border-radius  10px      background   fff      background  -moz-linear-gradient  fff   999       background  -webkit-linear-gradient  fff   999       background  -o-linear-gradient  fff   999      close       background   606061      color   FFFFFF      line-height  25px      position  absolute      right  -12px      text-align  center      top  -10px      width  24px      text-decoration  none      font-weight  bold      -webkit-border-radius  12px      -moz-border-radius  12px      border-radius  12px      -moz-box-shadow  1px 1px 3px  000      -webkit-box-shadow  1px 1px 3px  000      box-shadow  1px 1px 3px  000     close hover       background   00d9ff      CSS alert No JavaScript Just pure HTML and CSS  I believe that it will do the trick for you as it has for me

User · Answer

Many 3rd party JavaScript libraries allow you to select all elements that have a CSS class of a particular name applied to them  Then you can iterate those elements and dynamically attach the handler   There is no CSS-specific manner to do this   In JQuery  you can do       myCssClass   click function     alert  hohoho

User · Answer

Asking about  quot a class quot  in the question title  the answer is getElementsByClassName    var hrefs   document getElementsByClassName  quot YOUR-CLASS-NAME-HERE quot      for  var i   0  i  lt  hrefs length  i         hrefs item i  addEventListener  click   function e       e preventDefault      use if you want to prevent the original link following action       alert  hohoho

User · Answer

You could do it with jQuery       myClass   click function       alert  hohoho

User · Answer

It can t be done via CSS as CSS only changes the presentation  e g  only Javascript can make  the alert popup   I d strongly recommend you check out a Javascript library called jQuery as it makes doing something like this trivial     document  ready function         a   click function        alert  hohoho

User · Answer

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  amp  amp  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  amp  amp  e className indexOf  someclass    -1 alert  hohoho

User · Answer

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    lt script gt      window onload   function             var anchors   document getElementsByTagName  a            for var i   0  i  lt  anchors length  i                  var anchor   anchors i               anchor onclick   function                     alert  ho ho ho                                   lt  script gt    And to do it without jQuery  and only on a specific class  ex  hohoho     lt script gt      window onload   function             var anchors   document getElementsByTagName  a            for var i   0  i  lt  anchors length  i                  var anchor   anchors i               if   bhohoho b   match anchor className                     anchor onclick   function                         alert  ho ho ho                                                     lt  script gt    If you are okay with using jQuery  then you can do this for all anchors    lt script gt        document  ready function                a   click function                 alert  ho ho ho                         lt  script gt    And this jQuery snippet to only apply it to anchors with a specific class    lt script gt        document  ready function                a hohoho   click function                 alert  ho ho ho                         lt  script gt

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

Examples related to javascript

Examples related to css