get class name from element with onclick

Question

Because of different reasons I can NOT use $('.class').click or on('click', function..)

So I really have to use the onclick="" event from the html element.

Is there a way to find out the class from the element where the onclick happens?

and the fiddle http://jsfiddle.net/Aw8Rb/

Thanks for all the help!

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<span class="classic one"   onclick="someFunction('one')">CLICK HERE</span>
<span class="classic two"   onclick="someFunction('two')">CLICK HERE</span>
<span class="classic three" onclick="someFunction('three')">CLICK HERE</span>
<span class="classic four"  onclick="someFunction('four')">CLICK HERE</span>


<script type="text/javascript">

    function someFunction(abc) {
        alert(abc);
        alert($(this).attr('class'));

    }

</script>
</body>
</html>

toggle solution worked for me - stackoverflow.com/a/196038/984471 — Manohar Reddy Poreddy
– Manohar Reddy Poreddy, Commented Jun 9, 2021 at 7:45

bipen · Accepted Answer · 2013-06-12 08:41:55Z

25

you need to pass this reference when calling the function

try this

<span class="classic one"   onclick="someFunction(this,'one')">CLICK HERE</span>
......  //same for others

jquery

function someFunction(obj,abc) {
        alert(abc);
        alert($(obj).attr('class'));

    }

with plain javascript (without Jquery)

function someFunction(obj,abc) {
        alert(obj.className);
}

fiddle here

edited Jun 12, 2013 at 8:41

answered Jun 12, 2013 at 8:32

bipen

36.6k9 gold badges51 silver badges62 bronze badges

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

2 Comments

Kunal Tyagi Over a year ago

It worked but it is fetching internal classes too along with the given class, So is there any way that to get the class name without the internal classes

bipen Over a year ago

@KunalTyagi Sorry for late but you cannot do that since className or .attr('class') will give you all the classes associated to that element. You can loop through these classes and get/check for the one you required. Bottom line is, it actually depends on what you need after you get the classes, loop through it and do what you need. Enjoi coding

user2050393 · Accepted Answer · 2013-06-12 08:47:52Z

5

A non-jquery way using this.className here.

answered Jun 12, 2013 at 8:47

user2050393

Comments

Alessandro Minoccheri · Accepted Answer · 2013-06-12 08:33:09Z

2

If you add the element to the argument you can use it into your function to retrieve all data that you want
Try this:

    <span class="classic one"   onclick="someFunction('one',this)">CLICK HERE</span>
    <span class="classic two"   onclick="someFunction('two',this)">CLICK HERE</span>
    <span class="classic three" onclick="someFunction('three',this)">CLICK HERE</span>
    <span class="classic four"  onclick="someFunction('four',this)">CLICK HERE</span>


    <script type="text/javascript">

        function someFunction(abc,obj) {
            alert(abc);
            alert($(obj).attr('class'));

        }
    </script>

DEMO

answered Jun 12, 2013 at 8:33

Alessandro Minoccheri

36.1k22 gold badges128 silver badges176 bronze badges

Comments

Smile · Accepted Answer · 2013-06-12 08:38:05Z

2

From jsfiddle you provided, edit your code like below and you'll get answer (class) properly.

<span class="classic four"  onclick="someFunction(this,'four')">CLICK HERE</span>

function someFunction(obj,abc) {
    alert(abc);
    alert(obj.getAttribute('class'));   
}

Pass this as first argument and then access it in function with obj. After that you can use obj.getAttribute('class')

answered Jun 12, 2013 at 8:38

Smile

2,7684 gold badges37 silver badges59 bronze badges

Comments

Mohammad · Accepted Answer · 2018-11-25 06:31:47Z

2

Pass this.className as the parameter .. eg.

<input type="button" onclick="abc(this.className)" />

edited Nov 25, 2018 at 6:31

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

answered Jun 12, 2013 at 8:34

Jason

1531 gold badge5 silver badges16 bronze badges

Comments

Kevin Bowersox · Accepted Answer · 2013-06-12 08:38:16Z

1

Add this as an argument to the inline event handler:

<span class="classic one"   onclick="someFunction(this,'one')">CLICK HERE</span>

Then use the className property of element to get the className

function someFunction(e,abc) {
      console.log(this);
      alert(e.className);
}

Working Example http://jsfiddle.net/Aw8Rb/8/

answered Jun 12, 2013 at 8:38

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

Comments

Sudip · Accepted Answer · 2013-06-12 08:40:04Z

0

onclick="javascript:someFunction(this)"

function someFunction(obj) {  
            console.log($(obj).attr('class'));  
}

You will get the two classes in the order of writing.

answered Jun 12, 2013 at 8:40

Sudip

2,0512 gold badges13 silver badges16 bronze badges

Comments

Ramen_Lover912 · Accepted Answer · 2021-07-10 07:52:32Z

0

You can do something like this:

js...
function thisFunction(e) {
  console.log(e.target.class); // should return the class of the element that called it (button)
}
html...
<button onclick="thisFunction()">Click Me</button>

answered Jul 10, 2021 at 7:52

Ramen_Lover912

577 bronze badges

Collectives™ on Stack Overflow

get class name from element with onclick

8 Answers 8

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related