Currently, I am in the midst of creating a tip calculator with a grid consisting of various percentage buttons. My main objective is to change the font and background color when any tip button is selected. Nevertheless, an issue has surfaced - whenever I have one tip button selected and then switch focus to another tip button, the text on the previously focused tip button disappears. However, upon hovering over it, the text magically reappears.
I attempted to address this problem by employing a CSS class for the font color of unselected buttons. During the click event, I tried iterating through each button in the grid and manually applying that font using the DOM, but unfortunately, the "disappearing text" dilemma persists. Could it be necessary to incorporate something related to the 'blur' event? I seem to be at a standstill! Below is the code snippet for this button grid:
tipTiles.forEach((el) => {
el.addEventListener("click", (e) => {
tipTiles.forEach((tile) => {
if (tile.classList.contains("btn-bg2")) {
tile.classList.remove("btn-bg2");
tile.classList.remove("btn-font2");
tile.classList.add("btn-font1");
}
e.currentTarget.classList.add("btn-bg2");
e.currentTarget.classList.add("btn-font2");
});
});
});
Feel free to check out the project via the link provided below: