Django项目中JavaScript变量使用问题求助

问题根源 #

你遇到的变量未找到错误，大概率是全局变量作用域被隔离或者JS代码执行时机不对导致的：

• 如果你的JS代码是放在<script type="module">里，let current_theme会被限制在模块作用域，函数无法访问；
• 如果JS在DOM加载前执行，后续函数调用时可能变量上下文丢失；
• 另外你的代码存在大量重复逻辑，还没做主题状态持久化，刷新页面就会重置。

正确实现方案 #

以下是修复问题+优化后的完整代码，同时解决状态持久化、重复逻辑、DOM元素安全访问的问题：

// 等待DOM加载完成后执行，避免元素未找到或变量作用域问题
document.addEventListener('DOMContentLoaded', function() {
    // 从localStorage读取保存的主题，默认0（浅色）
    let current_theme = parseInt(localStorage.getItem('theme')) || 0;

    // 页面加载时先恢复主题状态
    if (current_theme === 1) {
        document.body.classList.add('darkmode');
    }

    // 统一的主题切换函数，替代原来的两个重复函数
    function toggleTheme() {
        const body = document.body;
        const wrapper = document.querySelector('.wrapper');
        
        if (current_theme === 0) {
            body.classList.add('darkmode');
            current_theme = 1;
        } else {
            body.classList.remove('darkmode');
            current_theme = 0;
        }

        // 安全操作wrapper元素，先判断是否存在
        if (wrapper) {
            wrapper.classList.remove('show');
        }

        // 把主题状态保存到localStorage，刷新页面不会丢失
        localStorage.setItem('theme', current_theme.toString());
    }

    // 把函数挂载到全局，方便HTML里的事件调用（比如按钮onclick）
    window.darkmode = toggleTheme;
    window.switchMode = toggleTheme;
});

关键修复点 #

• DOM加载时机：用DOMContentLoaded确保代码在页面元素加载完成后执行，避免找不到元素或变量异常；
• 作用域处理：把函数挂载到window对象上，确保HTML中的onclick="darkmode()"或onclick="switchMode()"能访问到；
• 状态持久化：用localStorage保存主题状态，页面刷新后自动恢复之前的选择；
• 简化逻辑：合并两个重复的切换函数，减少冗余代码；
• 安全访问DOM：操作.wrapper前先判断元素是否存在，避免找不到元素时报错。

Django中额外注意事项 #

• 确保你的JS代码放在模板的合适位置（比如底部的{% block js %}块），避免被模板渲染逻辑提前执行；
• 用Django静态文件标签引入JS：{% static 'js/your-theme-script.js' %}，确保文件路径正确；
• 不要把JS代码放在<script type="module">里，除非你明确处理模块作用域，否则会导致全局函数无法被HTML事件调用。

内容的提问来源于stack exchange，提问作者lennicoding