Why does changing the highlighted button in my "button grid" for my calculator cause the previously highlighted button text to disappear?

Issue

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:

https://tips-calculation.netlify.app/#

Solution

Try this it must fix your problem:)

1. Remove btn-bg1 btn-font1 classes from your elments in Html, like this:

<li class="tip-tile" tabindex="0">

2. In style.css find .tip-tile:last-child and add color: unset; after that it should look like this:

.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;
}

3. Update your js code with this one:

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");
      }
    });
  }
});

Answered By - Alireza