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>

我是JavaScript新手，出于某些原因，我需要创建一个切换按钮来更改网页主题。

我正在使用document.getElementById和getElementByTagName 为此。

但是我的问题是，当我单击一次按钮时，只有背景改变了，只有一个按钮的颜色改变了。当我再次单击应该在主题之间切换的按钮时，没有任何反应。 / p>

在此页面上，我有两个按钮可以更改页面上的某些颜色，第一个按钮的确很好用，所以我不知道为什么第二个按钮不起作用。

如前所述，我可以一次单击theme_changer按钮，当我单击它时，背景更改（＃000->＃f5deb3），第一个按钮的颜色更改为（＃f5deb3->＃000），然后第二个按钮的文本更改为（浅色主题->深色主题），但颜色不变，它保持不变（＃f5deb3），当我再次单击它时，什么也没有发生。

我尝试更改JavaScript文件中各行的顺序以查看是否有不同之处，以便能够查看问题出在哪里，但未发生任何变化。浏览器控制台也发生了同样的情况，但未返回任何错误

感谢您的帮助和建议。

Answer 1

您需要将原始背景色设置为“浅色主题”背景，并将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";

    }
}

Answer 2

您的代码几乎没有缺点。

document.body.style.backgroundColor在格式为“ rgb”而不是“十六进制”。
在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>

尝试在javascript

2 个答案: