Javascript 在模板中直接输入时有效，但从 src 文件中导入时无效答案

【问题标题】：Javascript works when typed directly in template, but not when imported from src fileJavascript 在模板中直接输入时有效，但从 src 文件中导入时无效
【发布时间】：2017-08-08 21:17:42
【问题描述】：

此 javascript 使用来自变量（名为物理位置）的值填充 SelectField。当 Javascript 像这样直接插入到模板中时，它可以工作：

<th> Format {{ form.physical_location(class_='form-control physical_location', value=physical_location) }} </th>

<script> var els = document.getElementsByClassName("physical_location");
    for (i = 0; i < els.length; i++) {
        els[i].value = els[i].getAttribute('value');
}
</script>

但是，当我尝试整理并将其放在单独的文件中时，它不像以前那样工作。比如我在模板文件中试过这个：

<script src="static/js/populateselect.js" type="text/javascript"></script>

<th> Format {{ form.physical_location(class_='form-control physical_location', value=physical_location) }} </th>

这在 populateselect.js 中：

var els = document.getElementsByClassName("physical_location");
    for (i = 0; i < els.length; i++) {
        els[i].value = els[i].getAttribute('value');
}

编辑** 答案中建议我的问题与我将 src 放在模板中的表单上方有关。结果我修改了模板谎言：

<th> Physical Location {{ form.physical_location(class_='form-control physical_location', value=physical_location) }} </th>
<script src="static/js/populateselect.js" type="text/javascript"></script>

但是，这并没有解决问题。我一定也做错了什么（？）

【问题讨论】：

如果你把脚本放在它应该操作的 DOM 元素之上，除非你将代码包装在 DOMReady 事件处理程序中，否则它将无法工作。您更改了两个示例之间的位置，它与内联脚本与标签 src 无关。
试着把你的脚本标签放在<th>下面
我已经修改了我的模板，但该建议似乎没有解决问题。（见编辑后的帖子）。

标签： javascript html flask-bootstrap

【解决方案1】：

您的代码示例有两个不同之处：

脚本是内联的或来自 URL 的
脚本位于它尝试使用 DOM 访问的 HTML 之前或之后

您选择了错误的两者之一来归咎于您的问题。

You can't access DOM elements before they exist.

【讨论】：

我已经修改了我的模板，但该建议似乎没有解决问题。