我的脚本可以在 Chrome 上正常运行，但不能在 Safari 上运行

Question

以下脚本是我网站上的暗模式切换代码。

我不太懂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>

Answer 1

代码中的问题似乎与初始化

darkMode

变量的方式有关。您看到的错误“SyntaxError: Unexpected token ';'”是因为您有这一行：

var darkMode = ;

变量

darkMode

正在初始化但没有值，这会导致语法错误。要解决此问题，您应该删除该行：

var darkMode = ;

相反，您应该使用 Django 模板中的值在

darkMode

函数内设置

setInitialDarkMode

变量。您的代码应如下所示：

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

此代码根据 Django 模板中的值正确初始化

darkMode

变量。确保 Django 模板变量

{{ request.session.is_dark_mode|default_if_none:"false"|lower }}

中没有任何无关字符或缺失值，因为它应该提供有效的 JavaScript 布尔值（

true

或

false

）以使此代码正常工作。

完成此更改后，您的代码应该可以在 Safari 和其他浏览器中按预期运行。