What could be the reason behind the disappearance of text from the previously highlighted button in my calculator's "button grid" when I change the highlighted button?

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:

Answer №1

Give this a try, it should solve your issue:)

  1. To fix the problem, remove the btn-bg1 and btn-font1 classes from your HTML elements:
<li class="tip-tile" tabindex="0">
  1. In your style.css file, locate .tip-tile:last-child and add color: unset; after it so it looks 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;
}
  1. Update your JavaScript code with the following changes:
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");
      }
    });
  }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing traditional JavaScript variables within Express.js or Node.js: A comprehensive guide

How can I successfully export variables from regular JavaScript to be used in ExpressJS? I attempted to use 'exports' but it didn't yield the desired results. For instance, in a regular JS file: var search = 'hello'; exports = s ...

Designate material for a particular table header element

Is there a method to pass content within a td-element to a specific th-element? I am working with a dynamic table and need to associate the content correctly under each table header. I have implemented pagination for the rows in the table. Currently, all ...

Executing javascript function using setInterval

I'm trying to make a JavaScript function that rotates between Divs every 1500ms (1.5s) This is what my script currently looks like: <?php $rowCount = 3; $prefix = 'ITS_'; ?> var step = 1; var stepmax = <?php echo $rowCount; ? ...

Node.js equivalent of Java's byteArray

I have a Node.js REST API with images being sent from a Java application as byte arrays. Here is an image Below is the string representation of the image in byte array form: [B@c75af72 I need to decode this byte array to verify if it is indeed an ima ...

Simply click on the image to open it in a lightbox view with a thumbnail using jQuery

I have implemented a feature using fancybox to display images in a lightbox with thumbnail images. My requirement is that when a user clicks on an image, the clicked image should be displayed first in the lightbox and the rest of the images should not be s ...

How can I log an object definition and text in the same console.log statement?

Looking for a way to correctly display "obj" in the same string as "note." Here's my JavaScript code: console.log(obj);// [query: "wordOfTheDay"] console.log(note + " : " + obj ); // obj does not show up I want to ensure that "obj" displays properly ...

Issues have been encountered with the functionality of $rootScope

I am currently struggling with a code snippet in my loginCtrl.js file where I can't seem to get $rootScope to store the value of vm.userEmail. app.controller('LoginCtrl', function($timeout, $q, $log, $rootScope /*$auth*/, $location, $mdTo ...

Utilizing modal dialogs in HTML and navigating back to the previous page

I'm currently learning about HTML, CSS, JavaScript, and SQL. Here is some context: Imagine a scenario where I am developing a website to manage information on dogs, their owners, and the relationships between them. All this data is stored in an SQL ...

Transferring information from a server action to a server component

Is there a way to transfer data from my server action, specifically the value of the temperature variable, to the Home server component in my nextJS14 app? I want to display this value in the jsx of my Home server component. How can I achieve this? impor ...

Initiate modal from sub-component

Right now, I am developing a vue application with a structure that closely resembles the following: <div class="characters"> <Character v-for="character in this.charactersToSearch" :key="character.id" :name="cha ...

What is the process for updating the ID within a Select2 ajax script function?

I am facing an issue with my select2 ajax script. The unique_ID in my table field is named "no", which is causing me to be unable to select an item in Select2 drop down. However, when I changed the name of my database table field from "no_donatur" to "ID", ...

What could be the reason why the Google Maps API fails to load on Firefox?

I am currently utilizing the v3 version of Google Maps API. While my map functions perfectly in Safari and Chrome, I encountered an issue in Firefox where I received the error message "google.maps.Map is not a constructor." When inspecting 'google.ma ...

Retrieving information through callback functions

A function I developed checks a list of tags that are submitted to it, sorting the good ones into a "good" array and the bad ones into a "bad" array. This process occurs within a callback, allowing the rest of my code to continue once complete. However, I ...

Attempting to retrieve AJAX response in JavaScript by utilizing an OOP object

Here is the code snippet I am working with: function CreateDiv(D) { D.body = function () { var d = $.ajax({ type: "GET", url: "Default.aspx", data: 'Ext ...

Certain sections within a Formik form are failing to update as intended

I have successfully implemented a custom TextField wrapper for Material-UI fields, but I am facing an issue with native Material UI fields not updating the form data upon submission. Below is the relevant code snippet along with a link to a code sandbox d ...

Tips for updating the value of an input text field in one HTML table according to a certain value entered in a different input text field located in another HTML table

I am working with an HTML table that consists of one row. Within this row, there are two TDs which each hold their own tables (each containing 10 rows with 10 input fields). My goal is to update the value of another corresponding text field based on change ...

Using HTML input checkboxes in conjunction with a JavaScript function

After creating a basic payment form using HTML/CSS/JS, I wanted to implement checks on user inputs using HTML patterns. In addition, I aimed to display a pop-up alert using JS to confirm the form submission only after all necessary inputs are correctly fil ...

Pagination does not refresh when conducting a search

HTML Code: The following HTML code displays a table with a search filter. . . <input type="search" ng-model="search.$" /> <table class="table table-striped table-bordered"> <thead> <tr> <th><a href ...

Is submitting with JQuery always a hit or miss?

Hey there, I'm currently working on a problem and could use some help. I seem to be having trouble getting inside my function for form submission in JQuery. Despite setting up console.logs, it appears that my code never reaches the first function. Can ...

Is it possible for a user to change the data stored in sessionStorage variables?

Incorporating client-side JavaScript into my project to save certain variables using Web Storage - specifically, the sessionStorage. However, uncertainty exists regarding whether a user holds the capability to alter these variable values. If this is indee ...