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文件的功能了

相关推荐
gnip6 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
掘金安东尼9 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
databook12 小时前
Manim实现闪光轨迹特效
后端·python·动效
hj5914_前端新手12 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
Hilaku13 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
LuckySusu13 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu13 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu13 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu13 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu13 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript