4

I am trying this.addclass in jquery to add a class to a DIV, that could be unknown. Can this be solved in this way? 

<style>.classOne { font-size:24px; color:#009900;}</style>

<script>
function hello()
{   alert();
$(this).addClass('classOne');
}
</script>

<div class="something"  onclick="hello();"> Test information </div>
Riaan Walters
  • 2,587
  • 2
  • 18
  • 30
Rohan Sandeep
  • 414
  • 1
  • 7
  • 15
  • 4
    [***jsFiddle***](http://jsfiddle.net/) A great place to test stuff before asking questions ... – SpYk3HH Nov 08 '12 at 15:03

4 Answers4

15

Avoid inline javascript whenever you can, and do something like this instead :

<style>.classOne { font-size:24px; color:#009900;}</style>

<script type="text/javascript">
$(function() {
    $('.something').on('click', function() {
        alert('hello');
        $(this).addClass('classOne');
    });
});
</script>

<div class="something"> Test information </div>

FIDDLE

adeneo
  • 312,895
  • 29
  • 395
  • 388
  • I think- I can't tell exactly, that he wants to add this function to many divs besides just '.somthing' – Scott Selby Nov 08 '12 at 15:17
  • "Avoid inline javascript whenever you can", why? inline been around forever, its faster and often easier to debug. i use as much inline as possible as opposed to having 50,000 lines of code to filter through. You're the second person i've seen say that and i still dont see why. maybe i'm just to old school for you young whipper snappers, lol. More lines of code = more crap to read = longer to process for both me and the PC – SpYk3HH Nov 08 '12 at 15:25
  • Not too mention, one of jQuery's key features, "chaining", is designed specifically for "inline" coding. Why would you recommend against this?, OH NM! I just got what you ment, i was thinking inline in the code, not on the element, *facepalm* stupie moment! – SpYk3HH Nov 08 '12 at 15:26
  • 1
    You got it! By inline JS I meant inline in the HTML, i.e. using onmouseover, onclick etc. in the HTML. There's nothing really wrong with it, but these days seperating function, apperance and layout makes things a lot easier, and having javascript and styles in seperate files is almost always the way to go. Chaining on the other hand is of course just fine, and is one of the core features in any javascript library. – adeneo Nov 08 '12 at 15:45
  • The correct answer for this should be Riaan Walters answer below. – mateostabio Sep 26 '19 at 18:06
  • @mateostabio - no it shouldn't ;.) – adeneo Oct 06 '19 at 18:06
8

Your reference to "this" is invalid, try this instead

<style>.classOne { font-size:24px; color:#009900;}</style>

<script>
function hello(ojecttRef)
{   
     alert();
     $(ojecttRef).addClass('classOne');
}
</script>

<div class="something"  onclick="hello(this);"> Test information </div>
Riaan Walters
  • 2,587
  • 2
  • 18
  • 30
2

This would be better...

//Bind a click event to the div
$('div').on('click', function(){
     $(this).addClass('classOne');
});

//No Onclick needed here
<div class="something"> Stuff Here </div>
VIDesignz
  • 4,703
  • 3
  • 25
  • 37
0

Use $('this').addClass('classOne'); instead.

this cannot go alone itself. Need to be in $()

Danny
  • 79
  • 3