Django的js文件没有响应(DOMContentLoaded)

问题出现的原因是因为当浏览器解析到"script"标签并执行其中的JavaScript代码时,页面上的DOM元素尚未完全加载和渲染。这意味着,当尝试通过document.getElementById('create-theme-button')获取元素时,该元素还不存在,导致addEventListener无法被正确绑定到任何元素上。

为了解决这个问题,您可以将JavaScript代码放置在页面加载完成后执行。这可以通过将JavaScript代码包裹在一个监听DOMContentLoaded事件的处理函数中来实现,如下所示:

原始代码:

html 复制代码
    <script>
        document.getElementById('create-theme-button').addEventListener('click', function() {
        // 创建输入框
        var input = document.createElement('input');
        input.type = 'text';
        input.placeholder = '请输入主题名称...';
        
        // 创建添加按钮
        var addButton = document.createElement('button');
        addButton.textContent = '添加';
        addButton.onclick = function() {
            // 这里可以添加点击"添加"按钮之后的逻辑
            // 例如,发送数据到服务器或在页面上显示新的主题
            alert('主题:' + input.value + ' 已添加(这里应该替换为真实的添加逻辑)');
        };
        
        // 获取容器并将输入框和按钮添加到页面上
        var container = document.getElementById('theme-input-container');
        container.appendChild(input);
        container.appendChild(addButton);
    });

    </script>

修改后

html 复制代码
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('create-theme-button').addEventListener('click', function() {
            // 创建输入框
            var input = document.createElement('input');
            input.type = 'text';
            input.placeholder = '请输入主题名称...';

            // 创建添加按钮
            var addButton = document.createElement('button');
            addButton.textContent = '添加';
            addButton.onclick = function() {
                // 这里可以添加点击"添加"按钮之后的逻辑
                alert('主题:' + input.value + ' 已添加(这里应该替换为真实的添加逻辑)');
            };

            // 获取容器并将输入框和按钮添加到页面上
            var container = document.getElementById('theme-input-container');
            container.appendChild(input);
            container.appendChild(addButton);
        });
    });
</script>

这样,Django就能正常响应js代码或者js文件的功能了

相关推荐
iChochy9 分钟前
[开源免费] iGTTS(Gemini TTS) 文本转语音(TTS)的命令行工具。
python·tts·gemini
TwoAI17 分钟前
Scikit-learn:从零开始构建你的第一个机器学习模型
python·机器学习·scikit-learn
跟橙姐学代码20 分钟前
Python里的“管家婆”:带你玩转os库的所有神操作
前端·python·ipython
倔强青铜三21 分钟前
最强Python Web框架到底是谁?
人工智能·python·面试
一枚前端小能手30 分钟前
🔥 滚动监听写到手抽筋?IntersectionObserver让你躺平实现懒加载
前端·javascript
遂心_33 分钟前
React中的onChange事件:从原理到实践的全方位解析
前端·javascript·react.js
ZeroNews内网穿透33 分钟前
企业远程访问方案选择:何时选内网穿透,何时需要反向代理?
运维·服务器·网络·python·安全
倔强青铜三33 分钟前
苦练Python第45天:使用open函数读取文件内容
人工智能·python·面试
赵谨言34 分钟前
基于python人物头像的卡通化算法设计与实现
开发语言·经验分享·python
GHOME34 分钟前
原型链的原貌
前端·javascript·面试