django 我的脚本在Chrome上工作正常,但在Safari上不行

chhkpiq4  于 2023-10-21  发布在  Go
关注(0)|答案(2)|浏览(178)

下面的脚本是我的网站上的黑暗模式切换的代码。
我真的不懂JavaScript(我只懂Python),所以写这段代码是一个挑战,它可能写得很差。但它所做的是使用Django模板语言检查会话变量“is_dark_mode“,以检查当前用户之前是否将其视图设置为亮模式或暗模式,然后它继续切换该变量的布尔值,并在我的HTML主体中添加或删除“dark-mode“类(这就是我在暗模式下切换样式的方式)。
它在Chrome中运行良好,但在Safari中根本不起作用,我不知道为什么。当使用JavaScript控制台时,它会抛出一个错误:

  1. SyntaxError: Unexpected token ';'

此SyntaxError指向以下代码行:

  1. var darkMode = ;

有没有人给予帮我把这件事弄清楚?我只是在学习后端,所以我不知道如何解决这个问题,我已经试过谷歌搜索它,没有成功。

  1. <script>
  2. document.addEventListener("DOMContentLoaded", function () {
  3. var modeToggle = document.getElementById("modeToggle");
  4. function setInitialDarkMode() {
  5. var darkMode = {{ request.session.is_dark_mode|default_if_none:"false"|lower }};
  6. modeToggle.checked = darkMode;
  7. if (darkMode) {
  8. document.body.classList.add("dark-mode");
  9. }
  10. }
  11. modeToggle.addEventListener("change", function () {
  12. var darkMode = modeToggle.checked;
  13. fetch("{% url 'toggle-mode' %}", {
  14. method: 'POST',
  15. headers: {
  16. 'X-CSRFToken': '{{ csrf_token }}',
  17. 'Content-Type': 'application/json',
  18. },
  19. body: JSON.stringify({ dark_mode: darkMode }),
  20. })
  21. .then(response => response.json())
  22. .then(data => {
  23. if (darkMode) {
  24. document.body.classList.add("dark-mode");
  25. } else {
  26. document.body.classList.remove("dark-mode");
  27. }
  28. console.log(data);
  29. })
  30. .catch(error => console.error(error));
  31. });
  32. setInitialDarkMode();
  33. });
  34. </script>
vnjpjtjt

vnjpjtjt1#

如前所述的另一种方法

  1. function checkSessionVariable() {
  2. var darkMode = "{{ request.session.is_dark_mode|default_if_none:"false"|lower|default:"false" }}";
  3. if (darkMode === "true") {
  4. // for calling setInitialDarkMode() or setting the toggle to true
  5. setInitialDarkMode();
  6. }
  7. }
  8. document.addEventListener("DOMContentLoaded", function() {
  9. var modeToggle = document.getElementById("modeToggle");
  10. // Calling checkSessionVariable() function on page load
  11. checkSessionVariable();
  12. // put all other code
  13. });
展开查看全部
cuxqih21

cuxqih212#

代码中的问题似乎与如何初始化darkMode变量有关。您看到的错误是“SyntaxError:意外的标记“”;’”,是因为你有这一行:

  1. var darkMode = ;

变量darkMode在初始化时没有值,这会导致语法错误。要解决此问题,您应该删除以下行:

  1. var darkMode = ;

相反,您应该使用Django模板中的值在setInitialDarkMode函数中设置darkMode变量。你的代码应该看起来像这样:

  1. function setInitialDarkMode() {
  2. var darkMode = {{ request.session.is_dark_mode|default_if_none:"false"|lower }};
  3. modeToggle.checked = darkMode;
  4. if (darkMode) {
  5. document.body.classList.add("dark-mode");
  6. }
  7. }

这段代码根据Django模板中的值正确地修改了darkMode变量。确保Django模板变量{{ request.session.is_dark_mode|default_if_none:"false"|lower }}中没有任何多余的字符或缺失的值,因为它应该提供一个有效的JavaScript布尔值(truefalse)来使此代码正确工作。
一旦你做了这样的改变,你的代码应该在Safari和其他浏览器中按预期工作。

展开查看全部

相关问题