JavaScript only works on index.html in a Django web app-CodePudding

I recently started to integrate JavaScript into my Django projects. However, I am facing an issue: Whenever I try to animate an element by clicking on a button it works fine in the index.html but not on other templates that extend the layout.html. I am new to JavaScript so I couldn't trace back the roots of the problem. Here is my code:

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 (in the same folder with 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")
]

My goal is to call the function pendeln in my JavaScript file as soon as I click the button (id="btnwow") in my thoughts.html file. As mentioned above it works fine in the index.html but not in the extended thoughts.html. Thank you for your help. I would appreciate it.

CodePudding user response：

I found the solution. It was crucial to put the btn.addEventListener before the button.addEventListener in the JS file. It seems like JS didn’t execute the rest of the init function because it couldn’t find the element of the variable button