CSS styles doesn't change after adding class with JavaScript

Question

I'm trying to build a selection menu and I want to change the background color of a button when it is clicked. I'm using the below code to apply the sort-select-active class to the div with sort-select id:

var selected = false;
var select= document.getElementById('sort-select')
select.onclick = (e) => {
   selected = !selected;
   if (selected)
      select.classList.add("sort-select-active");
   else 
      select.classList.remove("sort-select-active");
};

#sort-select {
  background-color: lightgray;
}

.sort-select-active {
  background-color: grey;
}

<div id="sort-contain">
 <div id="sort-select">
   Selected
  </div>
</div>

The class is successfully added to the element, but the background color doesn't change. Is there a conflict between the different background colors defined?

IDs have a priority over classes. So #sort-select is always overwriting the added class. — Esszed
– Esszed, Commented Jan 5, 2022 at 11:12

Youssouf Oumar · Accepted Answer · 2022-05-27 18:01:30Z

5

You set a background-color via an id, then you set another via a class, the first one will always be applied, because it has a higher specificity. Change #sort-select selector by a class in your CSS, or use inline styling like this:

var selected = false;
select.onclick = (e) => {
    selected = !selected;
    if (selected)
      slect.style.backgroundColor ="gray"
    else 
     slect.style.backgroundColor ="lightgray"
};

Also you could use !important keyword, like so :

.sort-select-active {
  background-color: grey!important;
}

edited May 27, 2022 at 18:01

answered Jan 5, 2022 at 11:15

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

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

1 Comment

Hendrik Over a year ago

You could also change your CSS selector to #sort-select.sort-select-active

Harry Tom · Accepted Answer · 2022-01-05 11:20:09Z

1

Check this out. I added !important in the css class

var select = document.getElementById("sort-select")
var selected = false;

select.addEventListener("click", (e) => {
  selected = !selected;
  if (selected) {
    select.classList.add("sort-select-active");
  } else {
    select.classList.remove("sort-select-active");
  }

});

#sort-select {
  background-color: lightgray;
}

.sort-select-active {
  background-color: grey !important;
}

<div id="sort-contain">
  <div id="sort-select">
    Selected
  </div>
</div>

answered Jan 5, 2022 at 11:20

Harry Tom

4221 gold badge5 silver badges14 bronze badges

Collectives™ on Stack Overflow

CSS styles doesn't change after adding class with JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related