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 - https://stackoverflow.com/a/196038/984471 — Manohar Reddy Poreddy, Jun 09 '21 at 07:45

bipen · Accepted Answer · 2013-06-12T08:41:55.283

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 '13 at 08:41

answered Jun 12 '13 at 08:32

bipen

36,319
9
49
62

Thanks! It helped Cheers buddy :) – Anoop Thiruonam Jun 18 '18 at 11:22
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 – Kunal Tyagi Jun 08 '20 at 12:12
@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 – bipen Aug 21 '20 at 08:58

score 5 · Answer 2 · answered Jun 12 '13 at 08:47

5

A non-jquery way using this.className here.

answered Jun 12 '13 at 08:47

score 2 · Answer 3 · answered Jun 12 '13 at 08:33

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

score 2 · Answer 4 · edited Nov 25 '18 at 06:31

2

Pass this.className as the parameter .. eg.

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

edited Nov 25 '18 at 06:31

Mohammad

21,175
15
55
84

answered Jun 12 '13 at 08:34

Jason

143
1
5
16

score 2 · Answer 5 · answered Jun 12 '13 at 08:38

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

score 1 · Answer 6 · answered Jun 12 '13 at 08:38

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/

score 0 · Answer 7 · answered Jun 12 '13 at 08:40

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 '13 at 08:40

Sudip Pal

2,041
1
13
16

score 0 · Answer 8 · answered Jul 10 '21 at 07:52

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 '21 at 07:52

Ramen_Lover912

57
7

get class name from element with onclick

8 Answers8

Linked