DjangoでJavaScriptを適応させる方法

前提・実現したいこと

わたしはDjangoでJavaScriptを適応させて生年月日のプルダウンのフォームを作成したいのですが、適応されず困っています...ご教授して頂けましたら幸いです。下記のような作りを実現したいです。

ディレクトリ構成は下記になります。

| - webproject
| | - setting.py
| | - urls.py
| - webapp
| | - urls.py
| | - views.py
| - templates
| | - form.html
| - static
| | - css
| | | - style.css
| | - js
| | | - main.js
|manage.py

環境

Python 3.7.6
Django 3.0.5
Mac 10.14.6

試したこと

下記のコードのように実装を行いました。
form.html

{% load static %} 
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WebApp</title>
    <link href="{% static 'css/style.css' %}" rel="stylesheet">
    <script type="text/javascript" src="{% static 'js/main.js' %}"></script>
    </head>
  <body>
      <form action="cgi-bin/formmail.cgi" method="post">
        <p>
        名前<br><input type="text" name="name" size="40">
        </p>
        <p>
        性別<br>
        <input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female">女
        </p>
        <p>
        生年月日<br>
        <select id="year"><option value="0">----</option></select>年
        <select id="month"><option value="0">--</option></select>月
        <select id="day"><option value="0">--</option></select>日
        </p>
        <p>
        自由記入<br>
        <textarea name="kanso" rows="4" cols="40"></textarea>
        </p>
        <p>
        <input type="submit" value="送信"><input type="reset" value="リセット">
        </p>
        </form>
  </body>
</html>

main.js

var time = new Date();
var year = time.getFullYear();
for (var i = year; i >= 1900; i--) {
  createOptionElements(i,'year');
}
for (var i = 1; i <= 12; i++) {
  createOptionElements(i,'month');
}
for (var i = 1; i <= 31; i++) {
  createOptionElements(i,'day');
}
 
function createOptionElements(num,parentId){
    var doc = document.createElement('option');
    doc.value = doc.innerHTML = num;
    document.getElementById(parentId).appendChild(doc);
}

setting.py

#上記は省略

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    [
        os.path.join(BASE_DIR, "static"), 
    ]
)

上記のように解説書通りに実装を行いましたが、適応がされず下記のエラーが発生しました。

ちなみにjsのコードを変更してみても写真のようなエラーが発生しました。このことからjsのファイルの記述ミスではない可能性が高いのはわかりました。

試しにCSSで

CSSは事前に適応させているためそれが反映されているか確認をします。

p {
  color: blue;
}

きちんと反映がされています。
setting.pyや{% load static %}が必要なことや、ディレクトリにの構成が間違いでないのにエラーになる理由がわかりません...ご教授をお願いして頂けないでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

下記でどうでしょうか。

JavaScript
1function createOptionElements(value, id) {
2  let select = document.getElementById(id);
3  let option = select.appendChild(document.createElement('option'))
4  option.value = option.text = value.toString();
5  select.appendChild(option);
6}

ただ、効率が悪いので、下記の通り日付を例に提案させていただきます。

JavaScript
1function createOptionElements2(id, min, max) {
2  let select = document.getElementById(id);
3  let value = min;
4  while (value <= max) {
5    select.add(new Option(value, value));
6    ++value;
7  }
8}
9createOptionElements('day', 1, 31);