当前位置：首页 > news >正文

Django的js文件没有响应（DOMContentLoaded）

news 2025/8/23 15:33:33

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

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

原始代码：

    <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>

修改后

<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>