I have a set of buttons in an html page of the following form:
<button
id="testID"
mat-mini-fab
ngClass="list-button"
(click)="onClick($event)"
>
Press
</button>
I try to change the color of each button belonging to .list-button class after clicking on it using the following css code:
.list-button:focus {
background-color: #7d698d;
}
However, while the color of the button I click each time changes (the color of all the previously clicked buttons also changes back to their original color). How could I fix it? I want all the clicked buttons to remain their new color.
I also tried assigning an id to the buttons of this class and changing their color inside the onClick() method as follows without success. The same problem remains. Could you help me, please?
onclick(event: any) {
const btn = document.getElementById('testID');
if (btn) btn.style.backgroundColor = '#7d698d';
}
No need for js. Use the focus selector in your stylesheet.
The
:focusselector is allowed on elements that accept keyboard events or other user inputs.
~ W3
button.list-button:focus {
background-color: #7d698d;
color: white;
}<button class="list-button">Click</button>Edit ~ with js. This method uses .querySelectorAll("button") and toggles the styled class .focus each time the button(s) are clicked. This works well when having multiple buttons.
// Get all the elements on the basis of query selector (button)
let btn = document.querySelectorAll("button");
for (var i = 0; i < btn.length; i++) {
(function(index) {
btn[index].addEventListener("click", function() {
console.log("Clicked Button: " + index);
let isPresent = false;
// Checks if the class is present or not
this.classList.forEach(function(e, i) {
if (e == "focus") {
isPresent = true;
} else {
isPresent = false;
}
});
// Toggles the presence of class (.focus) on the basis of the isPresent variable
if (isPresent) {
this.classList.remove("focus");
} else {
this.classList.add("focus");
}
});
})(i);
}.focus {
background-color: #7d698d;
color: white;
cursor: pointer;
}<button id="btn">Click</button>
<button id="btn">Click</button>
<button id="btn">Click</button>You need to get the id of the button that fired the event
onclick(event: any) {
const btn = document.getElementById(event.target.id);
if (btn) btn.style.backgroundColor = '#7d698d';
}
The reason why the color of the previously clicked buttons is resetting after you click on another one is that the focus is set on the last clicked button. Try using the code in the Venkatesh's answer.