CODEWITHSUNDEEP
jquerycss
user2469520
user2469520

Reputation:

JQuery Add/Remove Class doesn't work

I just learned how to use JQuery to make buttons enabling users to change CSS properties. Now I'm trying to create buttons that add or remove CSS classes, using the tutorial at http://www.w3schools.com/jquery/jquery_css_classes.asp

For some reason, it isn't working. This is the code in my head section:

<script>
 $(document).ready(function(){
 $("button#31").click(function(){
 $(".Page1").addClass("georgia nite");
 });
 });
</script>

<script>
 $(document).ready(function(){
 $("button#32").click(function(){
 $(".Page1").toggleClass("georgia nite");
 });
 });
</script>

<style>
 .georgia { font-family: Georgia; }
 .nite { background: #000; color: #fff; }
</style>

(Page is the name of a class assigned to a div...)

<div id="page-content-wrapper" class="Page1">

And this is the code in my body section...

<button id="btn31">Add Class</button>
<button id="btn32">Toggle</button>

For good measure, I also copied the new styles (georgia and nite) into my style sheet. But when I click the "Add Class" or "Toggle" buttons, nothing happens. Can anyone see what I'm doing wrong?

Upvotes: 1

Views: 1420

Answers (2)

lolbas
lolbas

Reputation: 794

Are you sure you can add multiple classes separated with space? Following code works perfectly for me, however with 1 class only:

$('#cl_wind').click(function() {
    $('#_error').addClass('hidden');
});

HTML part:

<div id="_error">Some text</div>
<button id="cl_wind"></button>

UPD: as @dersvenhesse mentioned, id of your element and the one u use in js differes. Elements id cannot be split by char/numbers. It is a single id

Upvotes: 0

dersvenhesse
dersvenhesse

Reputation: 6414

The ids in your HTML and your JS aren't matching.

The correct selector for ids is a # followed by the value of the id attribute, in your case $("#btn32") for <button id="btn32">.

Edited JS with changed selector from button#32 to #btn32:

$(document).ready(function(){
   $("#btn32").click(function() {
   $(".Page1").toggleClass("georgia nite");
 });

Upvotes: 2

Related Questions