Changing classes with jQuery but the element doesn't change color?

Question

I was in the middle of self studying HTML, CSS and JavaScript when at my job, an interviewer came to me and suggested to study jQuery as it was the “standard” now days.

So I decided to do that and started to migrate my own web page project for a future game I'm going to make, to jQuery, and it is pretty easy to understand so far and made me compress 150 or so lines of javaScript into 70 (more or less).

Now I am trying to add a class to a button when clicked using jQuery, for that I am using:

$(this).addClass("buttonActive");

In CSS, the button is:

.menu .buttonActive {
background-color: #222629;
}

When clicking the button, the buttin does change color, and that is perfect, but I wanted to make so that the color changes to the original one once I click another button, but it is not working. For that I am using:

$("#buttonClicked").removeClass("buttonActive");

I also tried adding another class together when removing the buttonActive but it didn't work.

$("#buttonClicked").removeClass("buttonActive").addClass("buttonNotActive");

.buttonNotActive {
background-color: #10394E;
}

Please, show us an example of your HTML, then we can see the buttons and its ids and classes, but my bet is that you are looking for and id that doesn't exists or you have more than one button with the same id — Calvin Nunes
– Calvin Nunes, Commented Jul 8, 2019 at 13:50
Did you look at your browser dev tools, to see if the class buttonNotActive was added to the element ? And what about the CSS ? It should tell you if the class buttonActive is still applied — Quentin Lerebours
– Quentin Lerebours, Commented Jul 8, 2019 at 13:55

Fraction · Accepted Answer · 2019-07-08 14:12:24Z

2

Try this example:

First remove buttonActive class from all buttons except the clicked one
Toggle buttonActive class for the clicked button

$(".myButton").click(function() {
  $(".myButton").not($(this)).removeClass('buttonActive');
  $(this).toggleClass("buttonActive");
})

.menu .buttonActive {
background-color: #222629;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <button class="myButton">My button</button>
  <button class="myButton">My button</button>
  <button class="myButton">My button</button>

</div>

edited Jul 8, 2019 at 14:12

answered Jul 8, 2019 at 14:00

Fraction

13.1k5 gold badges32 silver badges54 bronze badges

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

Comments

Narek · Accepted Answer · 2019-07-08 14:00:51Z

0

I didn't understand well. Like this?

$("#buttonClicked").click(function(){
  $(this).addClass("buttonActive");
})
$("#change").click(function(){
  $("#buttonClicked").removeClass("buttonActive");
})

.menu .buttonActive {
background-color: #222629;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <button id="buttonClicked">Button</button>
  <button id="change">Change</button>
</div>

answered Jul 8, 2019 at 14:00

Narek

2732 gold badges4 silver badges14 bronze badges

Comments

DubVader · Accepted Answer · 2019-07-08 14:10:15Z

0

Add a class to each of the elements that would be clicked. Use that class for the click function. When that element is clicked, remove the active class from the elements, and apply it to the element that was clicked.

In this example when you click on one of the elements its background will change to red. If you click on another element, it returns to its original color.

$( ".menu-item" ).click(function() {
    
    $(".menu-item").removeClass("buttonActive");
    $(this).addClass("buttonActive");

});

.item-1 {
  background-color: green;
}

.item-2 { 
 background-color: orange;
}

.item-3 {
 background-color: purple;
}

.menu p {
 color: #fff;
}

.buttonActive {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="menu">
  <p class="item-1 menu-item">Item 1</p>
  <p class="item-2 menu-item">Item 2</p>
  <p class="item-3 menu-item">Item 3</p>
</div>

answered Jul 8, 2019 at 14:10

DubVader

1,0621 gold badge6 silver badges9 bronze badges

1 Comment

DixiD Over a year ago

Thank you for the answer, I didn't use your method but it gave me the idea of selecting all buttons and removing the "buttonActive" class from them and it worked.

DixiD · Accepted Answer · 2019-07-08 14:21:07Z

0

Thanks to everyone who answered. Thanks to the ideas, I thought of selecting all buttons from my page and removing the buttonActive class

$(:button).removeClass("buttonActive");
$(this).addClass("buttonActive");

answered Jul 8, 2019 at 14:21

DixiD

15 bronze badges

3 Comments

Fraction Over a year ago

that will not work as expected if you want to toggle the buttonActive class, see my answer I've added a working demo

Fraction Over a year ago

it doesn't work if you want to toggle(add/remove) class when clicking on the same button

DixiD Over a year ago

oh, that is interesting, but I do not need the buttons to toggle for now

Collectives™ on Stack Overflow

Changing classes with jQuery but the element doesn't change color?

4 Answers 4

Comments

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related