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 this code:
#sort-select {
background-color: lightgray;
}
.sort-select-active {
background-color: grey;
}
<div id="sort-contain">
<div id="sort-select">
Selected
</div>
</div>
And I try to apply the sort-select-active class to my sort-select div using this JS code:
var selected = false;
select.onclick = (e) => {
selected = !selected;
if (selected)
select.classList.add("sort-select-active");
else
select.classList.remove("sort-select-active");
};
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?
You set a background-color via an id, then you set an other via a class, the first one will always be applied, cause has an higher priority. Change the #sort-select id by a class, or use inline styles like so :
var selected = false;
select.onclick = (e) => {
selected = !selected;
if (selected)
slect.style.backgroundColor ="gray"
else
slect.style.backgroundColor ="lightgray"
};
or add !important word 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>