JavaScript 仅适用于 Django Web 应用程序中的 index.html答案

【问题标题】：JavaScript only works on index.html in a Django web appJavaScript 仅适用于 Django Web 应用程序中的 index.html
【发布时间】：2021-09-17 23:12:39
【问题描述】：

我最近开始将 JavaScript 集成到我的 Django 项目中。但是，我遇到了一个问题：每当我尝试通过单击按钮为元素设置动画时，它在 index.html 中运行良好，但在扩展 layout.html 的其他模板上却不行。我是 JavaScript 新手，所以我无法追溯问题的根源。这是我的代码：

index.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
    <script type="text/javascript" src="{% static 'js/script.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/anime.min.js' %}"></script>
    <title>Meine Website</title>
</head>
<body>
    <div id="ball"></div>
    <button id="btnwow">Animieren</button>
</body>
</html>

layout.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
    <script type="text/javascript" src="{% static 'js/script.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/anime.min.js' %}"></script>
    <title>Layout</title>
</head>
<body>
    {% block body %}

    {% endblock %}
</body>
</html>

thoughts.html

{% extends 'website/layout.html' %}
{% load static %}

{% block body %}
    <div id="ball"></div>
    <button id="btnwow">Animieren</button>
{% endblock %}

script.js（与anime.min.js在同一文件夹中）

function animateStart(){
            anime({
                targets: '#topbar',
                translateY: [-500, 0],
                easing: 'easeInOutCirc',
                opacity: [.1, 1],
                duration: 1500
            });
            anime({
                targets: '#introduce',
                translateX: [-500, 0],
                easing: 'easeInOutCirc',
                opacity: [.1, 1],
                duration: 1500
            });
        }
function init(){
    function aufdecken(){
            anime({
                targets: '.offer',
                opacity: [0,1],
                delay: anime.stagger(100),
                duration: 2000,
            });
        }    
        function pendeln(){
            anime({
                targets: '#ball',
                translateX: [-500, 0],
                easing: 'easeInOutCirc',
                opacity: [.1, 1],
                duration: 1500
            });
        }
var button = document.getElementById('ein');
button.addEventListener('click', aufdecken)

var btn = document.getElementById('btnwow');
btn.addEventListener('click', pendeln)
};

document.addEventListener('DOMContentLoaded', animateStart);
document.addEventListener('DOMContentLoaded', init);

urls.py

from django.urls import path

from . import views

urlpatterns = [
    path("", views.index, name="index"),
    path("books/", views.books, name="books"),
    path("schlaf", views.schlaf, name="schlaf"),
    path("thoughts", views.thoughts, name="thoughts")
]

我的目标是在我的 想法中单击按钮 (id="btnwow") 后立即在我的 JavaScript 文件中调用函数 pendeln。 html 文件。如上所述，它在 index.html 中可以正常工作，但在扩展的 thoughts.html 中却不行。谢谢您的帮助。我会很感激的。

【问题讨论】：

您是否尝试将<div id="ball"></div> <button id="btnwow">Animieren</button> html 直接复制/粘贴到thoughts.html 文件中，替换block 标记进行测试？同样在您的浏览器检查器中，当您访问您的站点/想法时，在网络选项卡中，您是否看到加载了 javascript 文件？
@ja408 感谢您的回答。是的，我试图在没有块的情况下直接复制它。两个 css 文件都显示在网络选项卡中。但现在我收到以下错误：“script.js:37 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at HTMLDocument.init (script.js:37)”当然 JS 没有找到一个元素思想页面中的 id="ein" 因为没有。函数的顺序与 JS 代码有关吗？是否一出现错误就停止？
我找到了解决方案。将 btn.addEventListener 放在 button.addEventListener 的 JS 文件中至关重要。似乎 JS 没有执行 init 函数的其余部分，因为它找不到变量“button”的元素......
啊，是的，当然！ JS 从上到下读取。如果被调用的函数在到达调用函数的 JS 之前没有被加载，它不会知道。

标签： javascript html css django function

【解决方案1】：

我找到了解决方案。在 JS 文件中将btn.addEventListener 放在 button.addEventListener 之前非常重要。似乎 JS 没有执行 init 函数的其余部分，因为它找不到变量 button 的元素

【讨论】：