CODEWITHSUNDEEP
javascriptjqueryonclick
caramba
caramba

Reputation: 22480

get class name from element with onclick

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>

Upvotes: 9

Views: 103276

Answers (8)

Ramen_Lover912
Ramen_Lover912

Reputation: 57

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>

Upvotes: 0

Jason
Jason

Reputation: 153

Pass this.className as the parameter .. eg. 

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

Upvotes: 2

user2050393
user2050393

Reputation:

A non-jquery way using this.className here.

Upvotes: 5

bipen
bipen

Reputation: 36531

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

Upvotes: 25

Sudip
Sudip

Reputation: 2051

onclick="javascript:someFunction(this)"

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

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

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

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/

Upvotes: 1

Smile
Smile

Reputation: 2758

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

Upvotes: 2

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35963

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

Upvotes: 2

Related Questions