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>

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?

• javascript
• html
• css

• See this - stackoverflow./a/2876596/562359 – Hendrik Commented Jan 5, 2022 at 11:12
• 2 IDs have a priority over classes. So #sort-select is always overwriting the added class. – Esszed Commented Jan 5, 2022 at 11:12
• You haven't defined a variable called select – Adith Raghav Commented Jan 5, 2022 at 11:14

2 Answers 2

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;
}

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>