Javascriptはテンプレートで直接入力したときに機能しますが、srcファイルからインポートしたときには機能しません。

Question

このJavaScriptは変数（名前はphysical_location）からSelectFieldに値を設定します。私は物事を整理し、別のファイルに配置しようとすると、それは以前と同様

<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> 

しかし、それは動作しません：そうは以下のようにJavaScriptはテンプレートに直接挿入されたときに動作します。例えば、私は、テンプレートファイルでこれを試してみました：

<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'); 
} 

EDIT **はそれは私の問題を置く私には関係しているの答えで提案されていますテンプレート内のフォームの上にある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> 

しかし、これは問題を解決していません。また、私は間違って何かを行っている必要があります

Answer 1

をあなたのコードサンプル2つの違いがある（？）：

• スクリプトはインラインまたはスクリプトが、それはしようとするHTMLの前にある
URLからどちらかでありますDOMを使用してアクセスするか、後でアクセスしてください。

問題の原因が間違っています。

You can't access DOM elements before they exist。