Почему изменение выделенной кнопки в моей «сетке кнопок» для моего калькулятора приводит к исчезновению ранее выделенного текста кнопки?

Я создаю калькулятор чаевых с сеткой кнопок для возможных процентов. Когда выбрана любая кнопка подсказки, я хочу, чтобы шрифт и цвет фона изменились. Вот моя проблема: если у меня выбрана кнопка подсказки, а затем я переключаю фокус на другую кнопку подсказки, текст на ранее сфокусированной кнопке подсказки исчезает? А потом, если навести на него курсор, он снова появится.

У меня есть класс в CSS для цвета шрифта любой невыбранной кнопки. В событии щелчка я попытался перебрать каждую кнопку в сетке и вручную добавить этот шрифт с помощью DOM, но я все еще получаю эту проблему с «исчезающим текстом». Нужно ли мне что-то делать с событием «размытие»? Я застрял! Вот мой код для этой сетки кнопок:

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

Ссылка на проект ниже:

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

Все, что вы здесь делаете, это добавляете и удаляете имена классов; без HTML и, что важно, без CSS мы ничего не можем сделать. Пожалуйста, ознакомьтесь с руководством "минимальный воспроизводимый пример", а также см. "Как спросить"

— 02.04.2022 23:50

Я только что попытался воспроизвести ваши проблемы, но, похоже, у меня все работает нормально. У меня меняется цвет текста и фона, когда я нажимаю и навожу курсор на любую другую кнопку. Я использую Сафари 15.3. Какой браузер вы используете? Это в режиме разработки? Это может вызвать проблемы с правильным поведением событий.

— 02.04.2022 23:55

javascript html css css-grid

02.04.2022 23:38

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуйте это, это должно решить вашу проблему :)

Удалите классы btn-bg1 btn-font1 из ваших элементов в HTML, например:

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

В style.css найдите .tip-tile:last-child и добавьте color: unset; после этого должно получиться так:

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

Обновите свой код js следующим образом:

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

Вы заслужили золото! Вы решили мою проблему, спасибо!

— 04.04.2022 21:50

03.04.2022 04:02