尝试在 javascript 中实现暗/亮模式

Question

 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>

I'm new in JavaScript and for some reasons I need to create a switch button to change the theme of my webpage.

I'm using the document.getElementById and the getElementByTagName to do so.

But my problem is that when I click on the button once,only the background change and only the color of one of my buttons changes.When I click again on the button that is supposed to switch between the themes nothing happen.

On this page I have two buttons that change some colors on the page, the first one works really good so i can't figure out why the second one doesn't.

As explained before I can click on the theme_changer button one time, when I click on it the background changes (#000 -> #f5deb3), the color of the first button changes to (#f5deb3 -> #000) and the text of the second button change to (Light Theme -> Dark Theme) but not his color, it stays with the same color (#f5deb3) and when I click on it again nothing happens.

I tried changing the order of the lines in the JavaScript file to see if something was different and so to be able to see where the problem could be, but nothing changed.The same happened with the browser console, which returned no errors.

Thanks for your help and advice.

Answer 1

You need to set the original background color to the "Light Theme" background and change the = in your if statements to == . Also you are only setting the text color for the first element that has an a tag. Cahange your code to something like this:

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

    }
}

Answer 2

There are few drawbacks in your code.

1. document.body.style.backgroundColor gives a color string in the format of "rgb" not in "hex".
2. While using conditions within if statements, always use == or === instead of = .

Therefore, this code should work for you:

 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>