Задать вопрос
@DonerCSS
Начинающий веб-дизайнер
javascript

Как поменять надпись на кнопке?

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



let page = document.querySelector(".body");
let themeButton = document.querySelector(".themeButton");

if (!localStorage.theme) localStorage.theme = "lightTheme";
page.className = localStorage.theme;
themeButton.value = (themeButton.value === "Темная тема") ? "Светлая тема" : "Темная тема";

themeButton.onclick = function(){
    page.classList.toggle("lightTheme");
    page.classList.toggle("darkTheme");
    themeButton.value = (themeButton.value === "Темная тема") ? "Светлая тема" : "Темная тема";
    localStorage.theme = page.className || "lightTheme";
}


<body class="body lightTheme">

    <header>
    <div class="shapka">
        <img src="images/logo.png" alt="banner" id="picture1"> 
    </div>
    <nav>
        <ul>
            <li><a class = "navA" href="about us.html"><b>О нас</b></a></li>
            <li><a class = "navA" href="contacts.html"><b>Контакты</b></a></li>
            <li><input type="button" value="Темная тема" class="themeButton"></li>
        </ul>
    </nav>
    <a href="https://wa.me/77075841169" class="idhead" target="_blank"><p>присылайте свои новости нам
    <b>WhatsApp +7 (707) 584 1169</b></p></a>
    </header>
  • Вопрос задан
  • 86 просмотров
2 комментария
Подписаться 1 Средний 2 комментария
Пригласить эксперта
Ответы на вопрос 1
fallus
@fallus
1. Удалить это везде:
themeButton.value = (themeButton.value === "Темная тема") ? "Светлая тема" : "Темная тема";


2. Заменить 
<input type="button" value="Темная тема" class="themeButton">
на 
<button type="button" class="themeButton" data-light-text="Темная тема" data-dark-text="Светлая тема"></button>


3. Добавить CSS:
.themeButton::before {
  content: attr(data-dark-text)
}
body.darkTheme .themeButton::before {
  content: attr(data-light-text)
}


.themeButton::before — этот стиль будет применён всегда.
body.darkTheme .themeButton::before — этот, только когда у body есть класс darkTheme
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Генерация лабиринта на Unity
01 мая 2024, в 23:00
6000 руб./за проект
Сделать телеграм бота вакансий
01 мая 2024, в 22:47
30000 руб./за проект
Разработать NLP модель для фильтрации вакансий
01 мая 2024, в 22:28
8000 руб./за проект
Ещё заказы