Попытка реализовать темный / светлый режим в JavaScript - PullRequest
Новая
       7

Попытка реализовать темный / светлый режим в JavaScript

0 голосов
/ 12 ноября 2019 

document.getElementById("theme_change").onclick = function () {
    if (document.body.style.backgroundColor = "#000") {
        document.body.style.backgroundColor = "#f5deb3";
        document.getElementsByTagName("a")[0].style.color = "#000";
        document.getElementsByTagName("a")[0].style.borderColor = "#000";
        document.getElementById("theme_change").innerText = "Light Theme";
    } else if (document.body.style.backgroundColor = "#f5deb3") {
        document.body.style.backgroundColor = "#000";
        document.getElementsByTagName("a")[0].style.color = "#f5deb3";
        document.getElementsByTagName("a")[0].style.borderColor = "#f5deb3";
        document.getElementById("theme_change").innerText = "Dark Theme";

    }
}
<div id="buttons">
            <a href="#" id="color_change" class="btn">Change Color</a>
            <a href="#" id="theme_change" class="btn">Light Theme</a>
       </div>

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

IДля этого я использую document.getElementById и getElementByTagName.

Но моя проблема в том, что когда я нажимаю на кнопку один раз, меняется только фон и меняется только цвет одной из моих кнопок. Когда яснова нажмите на кнопку, которая должна переключаться между темами, ничего не происходит.

На этой странице у меня есть две кнопки, которые меняют некоторые цвета на странице, первая работает очень хорошо, поэтому я не могу понять,почему второй нет.

Как объяснялось ранее, я могу один раз нажать на кнопку theme_changer, когда я нажимаю на нее, фон меняется (# 000 -> # f5deb3), цвет первой кнопкиизменится на (# f5deb3 -> # 000), а текст второй кнопки изменится на (Светлая тема -> Темная тема), но не на его цвет, он останется с тем же цветом (# f5deb3), и когда я снова нажму на негоничего не происходит.

Я попытался изменить порядок строк в файле JavaScript, чтобы увидеть, не было ли что-то другое, и чтобы увидеть, где может быть проблема, но ничего не изменилось. То же самое произошло с браузером. консоль, которая не выдала ошибок.

Спасибо за вашу помощь и советы.

Ответы [ 2 ]

0 голосов
/ 12 ноября 2019

Есть несколько недостатков в вашем коде.

  1. document.body.style.backgroundColor дает цветную строку в формате "rgb", а не в "hex".
  2. При использовании условий в операторах if всегда используйте == или === вместо =.

Поэтому этот код должен работать для вас: 

document.getElementById("theme_change").onclick = function () {
if (document.body.style.backgroundColor === "" || document.body.style.backgroundColor === "rgb(0, 0, 0)") {
    document.body.style.backgroundColor = "#f5deb3";
    document.getElementsByTagName("a")[0].style.color = "#000";
    document.getElementsByTagName("a")[0].style.borderColor = "#000";
    document.getElementById("theme_change").innerText = "Light Theme";
} else if (document.body.style.backgroundColor === "rgb(245, 222, 179)") {
    document.body.style.backgroundColor = "#000";
    document.getElementsByTagName("a")[0].style.color = "#f5deb3";
    document.getElementsByTagName("a")[0].style.borderColor = "#f5deb3";
    document.getElementById("theme_change").innerText = "Dark Theme";

}
}
<div id="buttons">
            <a href="#" id="color_change" class="btn">Change Color</a>
            <a href="#" id="theme_change" class="btn">Light Theme</a>
       </div>
0 голосов
/ 12 ноября 2019

Вам необходимо установить исходный цвет фона на фон «Light Theme» и изменить = в своих операторах if на ==. Также вы устанавливаете цвет текста только для первого элемента, который имеет тег a. Измените ваш код на что-то вроде этого: 

document.getElementById("theme_change").onclick = function () {
    if (document.body.style.backgroundColor == "#000") {
        document.body.style.backgroundColor = "#f5deb3";
        document.getElementsByTagName("a")[0].style.color = "#000";
        document.getElementsByTagName("a")[0].style.borderColor = "#000";
        document.getElementsByTagName("a")[1].style.color = "#000";
        document.getElementsByTagName("a")[1].style.borderColor = "#000";
        document.getElementById("theme_change").innerText = "Light Theme";
    } else if (document.body.style.backgroundColor = "#f5deb3") {
        document.body.style.backgroundColor == "#000";
        document.getElementsByTagName("a")[0].style.color = "#f5deb3";
        document.getElementsByTagName("a")[0].style.borderColor = "#f5deb3";
        document.getElementsByTagName("a")[1].style.color = "#f5deb3";
        document.getElementsByTagName("a")[1].style.borderColor = "#f5deb3";
        document.getElementById("theme_change").innerText = "Dark Theme";

    }
}
...