JavaScript работает только на index.html в веб-приложении Django

Недавно я начал интегрировать 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")
]

Моя цель - вызвать функцию pendeln в моем JavaScript файле, как только я нажимаю на кнопку (id="btnwow") в моем thoughts.html файле. Как упоминалось выше, он прекрасно работает в index.html, но не в расширенном thoughts.html. Спасибо за помощь. Буду очень признателен.

Я нашел решение. Было очень важно поместить btn.addEventListener перед button.addEventListener в JS файле. Похоже, что JS не выполнял остальную часть функции init, потому что не мог найти элемент переменной "button"...

Вернуться на верх