I'm building a tip calculator that has a grid of buttons for possible percentages. When any tip button is selected, I want the font and background color to change. Here's my issue, if I have a tip button selected, and then change the focus to a different tip button, the text on the previously focused tip button disappears? And then if you hover over it, it re-appears.
I have a class in CSS for the font color of any unselected button. On the click event, I tried looping over each button in the grid and manually adding that font using the DOM, but I still get this "disappearing text" issue. Do I need to be doing something with the 'blur' event? I'm stuck! Here's my code 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");
});
});
});
Link to the project below:
Try this it must fix your problem:)
<li class="tip-tile" tabindex="0">
.tip-tile:last-child { color: unset; text-align: center; padding: 0.5rem; border-radius: 5px; font-size: 1.2rem; background-color: #f4fafa; -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; }
tipTiles.forEach((el) => { tipTiles.forEach((tile) => { tile.classList.remove("tip-tile"); tile.classList.add('btn-bg1', 'btn-font1', 'tip-tile'); }); el.addEventListener("click", (e) => { tipTiles.forEach((tile) => { if (tile.classList.contains('btn-bg2')) { tile.classList.remove("tip-tile"); tile.classList.replace("btn-bg2", "btn-bg1"); tile.classList.replace("btn-font2", "btn-font1"); tile.classList.add("tip-tile"); } e.currentTarget.classList.replace("btn-bg1", "btn-bg2"); e.currentTarget.classList.replace("btn-font1", "btn-font2"); }); }); });
resetBtn.addEventListener("click", function () { if (totalAmount.textContent !== 0) { totalAmount.textContent = "$0.00"; tipAmount.textContent = "$0.00"; billField.value = 0; peopleField.value = 0; resetBtn.classList.remove("btn-bg2"); tipTiles.forEach((tile) => { if (tile.classList.contains("btn-bg2")) { tile.classList.remove("tip-tile"); tile.classList.replace("btn-bg2", "btn-bg1"); tile.classList.replace("btn-font2", "btn-font1"); tile.classList.add("tip-tile"); } }); } });