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?
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>