Django项目JavaScript仅在index.html生效，继承layout模板无法触发动画

问题根源 #

1. 事件绑定报错中断执行：你的init函数里尝试给id为ein的元素绑定点击事件，但thoughts.html页面里没有这个元素，document.getElementById('ein')会返回null，调用null.addEventListener会抛出JS错误，直接终止init函数的运行，导致后面给btnwow绑定事件的代码根本没有执行。
2. JS依赖顺序错误：你在head里先引入了script.js再引入anime.min.js，script.js里用到的anime对象在执行时还没加载完成，可能会触发未定义错误。即使index.html偶然生效，这也是不稳定的写法。

解决步骤 #

1. 修复空元素绑定逻辑 #

修改script.js里的init函数，给元素获取增加存在性判断：

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');
    if(button) {
        button.addEventListener('click', aufdecken)
    }

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

2. 调整JS引入顺序 #

修改layout.html和index.html里的JS引入顺序，先加载依赖库anime.min.js，再加载你的业务脚本：

<!-- 先引入依赖库 -->
<script type="text/javascript" src="{% static 'js/anime.min.js' %}"></script>
<!-- 再引入自己的业务脚本 -->
<script type="text/javascript" src="{% static 'js/script.js' %}"></script>

可选优化：脚本放到body末尾 #

如果还是有加载顺序问题，可以把两个JS标签放到body标签的末尾（</body>之前），确保DOM元素全部解析完成后再执行JS逻辑，不需要额外依赖DOMContentLoaded事件也能正常绑定元素。

内容的提问来源于stack exchange，提问作者mellomax9