Показать сообщение отдельно
  #1 (permalink)  
Старый 05.05.2024, 11:24
Интересующийся
Отправить личное сообщение для MorenO410 Посмотреть профиль Найти все сообщения от MorenO410
 
Регистрация: 18.01.2024
Сообщений: 18

Смена иконки с помощью текстового значения
В HTML организован элемент с помощью тега <a></a>
<a href="#" class="menu__mode-moon" id="dark-mode-icon">i</a>
Иконка для тега <a></a> организована с помощью иконочного шрифта
<a>i</a> где буква i – это иконка луны
<a>k</a> где буква k – это иконка солнца
С помощью JS происходит переключение между режимами тем (светлая, темная). Код основан на смене текстового значения с i на k при этом происходит смена отображения иконки.
Ошибка в том, что смена иконки согласно кода происходит только с луны на солнца, а если переключиться с темной темы на светлую то смена иконок с солнца на луну уже не происходит (все так же остается иконка солнца (буква k)).
Прошу помощи в исправлении ошибки в коде JS
let darModeIcon = document.querySelector('#dark-mode-icon');
let paragraph = document.querySelector('.menu__mode-moon');

darModeIcon.onclick = () => {
  paragraph.textContent = 'k';
  document.body.classList.toggle('dark-mode');
};


Для сведения:
'dark-mode' – это свойства цифровых палитр для темной темы
.dark-mode {
  --bg-color: #0b061f;
  --text-color: #fdfdfd;
  --shadow-color: rgba(0, 0, 0, .7);
}
Изображения:
Тип файла: jpg list.jpg (9.1 Кб, 1 просмотров)
Ответить с цитированием