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?

Alex Vidal · Accepted Answer · 2011-01-03 22:07:54Z

96

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>

answered Jan 3, 2011 at 22:07

Alex Vidal

4,10822 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

JCOC611 Over a year ago

Or you could use document.getElementsByClassName("class")

luminarious Over a year ago

Incredible, so it can indeed actually be done without a library! I found an excellent article about JS events as well.. howtocreate.co.uk/tutorials/javascript/domevents

Alex Vidal Over a year ago

@JCOC611: I didn't use getElementsByClassName because it doesn't work on every major browser.

JCOC611 Over a year ago

@luminarious: Yay, everything can be done without a library! @Alex: :O I didn't know, I don't use it anyways lol...you mean IE, right?

Fanky Over a year ago

2020 here, you can use getElementsByClassName on all browsers safely: caniuse.com/getelementsbyclassname

|

izstas · Accepted Answer · 2015-08-30 16:46:05Z

45

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');
}

edited Aug 30, 2015 at 16:46

izstas

5,0643 gold badges44 silver badges58 bronze badges

answered Jan 4, 2011 at 1:11

kennebec

105k32 gold badges109 silver badges127 bronze badges

1 Comment

Skippy le Grand Gourou Over a year ago

I had issues with document.body.onclick, but it seems to work well with document.onclick.

Novikov · Accepted Answer · 2011-01-03 22:03:46Z

11

You could do it with jQuery.

$('.myClass').click(function() {
  alert('hohoho');
});

answered Jan 3, 2011 at 22:03

Novikov

4,4994 gold badges30 silver badges36 bronze badges

4 Comments

Juan Over a year ago

Is it possible with just css and javascript though?

zzzzBov Over a year ago

jQuery is a javascript library, so it already is just HTML/CSS/JS

Erik Noren Over a year ago

Yes, but you'd have to write your own JavaScript code to iterate the elements in the DOM and query their attributes to see if a css class is applied to them and then take action. For example: howtocreate.co.uk/tutorials/javascript/domcss but in my opinion the amount of code you'll have to write to be safe about it is not worth it compared to using a community-backed, free project.

zzzzBov Over a year ago

@jsoldi I'm not a mind-reader, and your comment didn't give me any confidence in your knowledge of HTML/CSS/JS.

Rocky Madden · Accepted Answer · 2011-01-03 22:05:52Z

4

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");
  });
});

answered Jan 3, 2011 at 22:05

Rocky Madden

6193 silver badges9 bronze badges

Comments

viniciussss · Accepted Answer · 2021-04-09 01:36:50Z

4

Following JCOC611 suggestion:

window.onload = function() {    
    let elements = document.getElementsByClassName("someClassName");

    for(let i = 0; i < elements.length; i++) {
        elements[i].onclick = function () {
            alert("Clicked in an element of the class.");
        }
    }
};

answered Apr 9, 2021 at 1:36

viniciussss

4,6923 gold badges33 silver badges45 bronze badges

Comments

Panchi · Accepted Answer · 2016-02-15 17:27:38Z

Here is my solution through CSS, It does not use any JavaScript at all

HTML:

<a href="#openModal">Open Modal</a>

<div id="openModal" class="modalDialog">
        <div>   <a href="#close" title="Close" class="close">X</a>

                <h2>Modal Box</h2>

            <p>This is a sample modal box that can be created using the powers of CSS3.</p>
            <p>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.</p>
        </div>
    </div>

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 > 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

Erik Noren · Accepted Answer · 2011-01-03 22:05:31Z

2

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"); });

answered Jan 3, 2011 at 22:05

Erik Noren

4,3391 gold badge27 silver badges29 bronze badges

Comments

Fanky · Accepted Answer · 2020-12-05 11:04:53Z

2

Asking about "a class" in the question title, the answer is getElementsByClassName:

  var hrefs = document.getElementsByClassName("YOUR-CLASS-NAME-HERE");
  for (var i = 0; i < 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');
   });
  }

answered Dec 5, 2020 at 11:04

Fanky

1,8041 gold badge20 silver badges25 bronze badges

Comments

TeasingDart · Accepted Answer · 2024-08-27 20:46:07Z

0

I liked the @kennebec solution, but it fails when there are embedded elements such as:

<span class='my_popup'>Click <i>this!</i></span>

This is fixed using:

document.body.onclick= function(e) {
  e= window.event ? event.srcElement:e.target;
  if(e= isClass(e,'my_popup')) {
    alert('hohoho');
  }
  function isClass(e,n) {
    if(e.className && e.className.indexOf(n)!=-1)
      return(e);
    if(e.parentNode)
      return(isClass(e.parentNode,n));
    return(null);
  }
}

answered Aug 27, 2024 at 20:46

TeasingDart

3811 silver badge7 bronze badges

Collectives™ on Stack Overflow

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

9 Answers 9

6 Comments

1 Comment

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

6 Comments

1 Comment

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related