我的JavaScript代码只有在HTML文件内部和通过
外部调用时才能运行。<script type="text/javascript" src="{{ url_for('static', filename='index.js') }}"></script>
<script>
var scroller = document.querySelector("#scroller");
...
</script>
我使用Flask和Jinja，文件结构为:
/app
/static
index.js
/templates
base.html
myfile.html
routes.py
__init__.py
...
index.js内部的代码与HTML中<script>标签之间的代码完全相同。
在jinja和使用块标记方面，base.html:
<body>
{% block content %}
<!-- typical HTML stuff here -->
{% endblock %}
<!-- some Bootstrap tags -->
<script ... ></script>
{% block script %}{% endblock %}
</body>
myfile.html:
<body>
...
{% block script %}
<script type="text/javascript" src="{{ url_for('static', filename='index.js') }}"></script>
{% endblock %}
<script>
...
</script>
代码本身可以工作，而且不久之前没有这个问题;我不知道我改变了什么导致了这一切，我甚至无法想象是什么导致了这一切。如果需要更多的代码，我可以很容易地分享它。
有什么我不明白的吗?
要注意:我有一个类似的问题，试图包括外部JavaScript代码在我的HTML;它一度不能工作，然后它工作了，现在它的行为方式我已经描述过了
进一步说明:我有另一个.html文件，它有自己的外部.js文件，可以正常工作。
外部文件中的脚本从不要求在内联代码中提供相同的内容。可能你正在尝试处理一些元素，而你的脚本在这些元素被挂载到文档对象之前被执行。
一个懒惰的解决方案是将外部文件链接标签移动到HTML.Body的底部。
或
可以使用defer属性设置为脚本元素https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
或
如果你的页面中包含了一些库，比如jQuery，你可以使用文档。
或
你可以实现你自己的文档。准备好如下
function myReady() {
return new Promise(function(resolve) {
function checkState() {
if (document.readyState !== 'loading') {
resolve();
}
}
document.addEventListener('readystatechange', checkState);
checkState();
});
};
myReady().then(function() {
// Put your app custom code here
});