下面的脚本是我的网站上的黑暗模式切换的代码。
我真的不懂JavaScript(我只懂Python),所以写这段代码是一个挑战,它可能写得很差。但它所做的是使用Django模板语言检查会话变量“is_dark_mode
“,以检查当前用户之前是否将其视图设置为亮模式或暗模式,然后它继续切换该变量的布尔值,并在我的HTML主体中添加或删除“dark-mode
“类(这就是我在暗模式下切换样式的方式)。
它在Chrome中运行良好,但在Safari中根本不起作用,我不知道为什么。当使用JavaScript控制台时,它会抛出一个错误:
SyntaxError: Unexpected token ';'
此SyntaxError指向以下代码行:
var darkMode = ;
有没有人给予帮我把这件事弄清楚?我只是在学习后端,所以我不知道如何解决这个问题,我已经试过谷歌搜索它,没有成功。
<script>
document.addEventListener("DOMContentLoaded", function () {
var modeToggle = document.getElementById("modeToggle");
function setInitialDarkMode() {
var darkMode = {{ request.session.is_dark_mode|default_if_none:"false"|lower }};
modeToggle.checked = darkMode;
if (darkMode) {
document.body.classList.add("dark-mode");
}
}
modeToggle.addEventListener("change", function () {
var darkMode = modeToggle.checked;
fetch("{% url 'toggle-mode' %}", {
method: 'POST',
headers: {
'X-CSRFToken': '{{ csrf_token }}',
'Content-Type': 'application/json',
},
body: JSON.stringify({ dark_mode: darkMode }),
})
.then(response => response.json())
.then(data => {
if (darkMode) {
document.body.classList.add("dark-mode");
} else {
document.body.classList.remove("dark-mode");
}
console.log(data);
})
.catch(error => console.error(error));
});
setInitialDarkMode();
});
</script>
2条答案
按热度按时间vnjpjtjt1#
如前所述的另一种方法
cuxqih212#
代码中的问题似乎与如何初始化
darkMode
变量有关。您看到的错误是“SyntaxError:意外的标记“”;’”,是因为你有这一行:变量
darkMode
在初始化时没有值,这会导致语法错误。要解决此问题,您应该删除以下行:相反,您应该使用Django模板中的值在
setInitialDarkMode
函数中设置darkMode
变量。你的代码应该看起来像这样:这段代码根据Django模板中的值正确地修改了
darkMode
变量。确保Django模板变量{{ request.session.is_dark_mode|default_if_none:"false"|lower }}
中没有任何多余的字符或缺失的值,因为它应该提供一个有效的JavaScript布尔值(true
或false
)来使此代码正确工作。一旦你做了这样的改变,你的代码应该在Safari和其他浏览器中按预期工作。