Блог

Главная - Вопросы по программированию - Как я могу переключать цвета текста при двойном нажатии кнопки?

Как я могу переключать цвета текста при двойном нажатии кнопки?

#javascript

#javascript

Вопрос:

Мне нужно чередовать цвет трех чисел, содержащих класс ‘.holiday’, и они равны 24, 25 и 31. Но с помощью этого кода я получаю изображение.введите описание изображения здесь После второго щелчка цифры 24 и 31 становятся красными, а 25 — синими.

 let holidayClick = () => {
  const holidayBtn = document.querySelector('#btn-holiday');
  const holidayLi = document.querySelectorAll('.holiday');
  let isColored = false;

  for (let li of holidayLi) {
    holidayBtn.addEventListener('click', () => {
      if (isColored) {
        li.style.color = 'red';
        isColored = false;
      } else {
        li.style.color = 'blue';
        isColored = true;
      }
    });
  }
};
holidayClick();

введите описание изображения здесь

Комментарии:

1. Вы пробовали устанавливать точки останова в своем коде и проходить через него?

2. похоже isColored , что он является общим для всех обработчиков кликов. Вероятно, это не то, что вы хотите.

3. Да, я это сделал. Но я получаю эту ошибку: неперехваченная ошибка ссылки: документ не определен script.js: 11 Нет доступного отладчика, не удается отправить «переменные»

Ответ №1:

Не совсем понятно, чего вы хотите достичь. Но если вы хотите переключать цвета для определенных li элементов, используя some state ( isColored ) , вы можете сохранить состояние в атрибуте данных для li элемента. Обработчик события для кнопки должен быть создан один раз, в фрагменте он создается на уровне документа (делегирование события)

 document.addEventListener("click", holidayClick)

function holidayClick(evt) {
  // return if the click did not originate from the button
  if (evt.target.id !== "btn-holiday") { return; }
  
  // find all li /w attribute [data-holidaycolored] and
  // colorize them according to the value of the attribute
  document.querySelectorAll('[data-holidaycolored]').forEach(
    li => {
      const isColored = !! li.dataset.holidaycolored;
      //                  ^ convert to number
      //                ^ convert number to boolean
      li.style.color = !isColored ? "blue" : "red";
      li.dataset.holidaycolored =  !isColored;
      //                          ^ flip boolean and convert to number
    });
}  
 <ul>
  <li>...</li>
  <li data-holidaycolored="0">21</li>
  <li data-holidaycolored="0">22</li>
  <li>23</li>
  <li>24</li>
  <li>...</li>
  <li data-holidaycolored="0">31</li>
</ul>

<button id="btn-holiday">holidays</button>

Возможно, вы также хотите раскрасить отдельные li элементы. В этом случае:

 document.addEventListener("click", holidayClick)

function holidayClick(evt) {
  const origin = evt.target;
  
  // return if the click did not originate from the button
  if (!origin.dataset.colorholiday) { return; }
  
  // colorize the clicked element according to the value of the attribute
  const isColored = !! origin.dataset.holidaycolored;
  origin.style.color = !isColored ? "blue" : "red";
  origin.dataset.holidaycolored =  !isColored;
}  
 li {
  cursor: pointer;
}  
 <ul>
  <li>...</li>
  <li data-colorholiday="0">21</li>
  <li data-colorholiday="0">22</li>
  <li data-colorholiday="0">23</li>
  <li data-colorholiday="0">24</li>
  <li>...</li>
  <li data-colorholiday="0">31</li>
</ul>