JS内でJSを読み込むとdocument.getElementById()でエラーが出ます

Question

前提・実現したいこと

現在、自分が作成しているサイトにカレンダーを埋め込もうと思い、他サイトからJS,css,htmをコピーして埋め込んでいます。
前提として、index.js内のmakeCalendar関数でカレンダーのhtmlを作成して、そこにcalendar.jsを読み込んでいる状況です。

発生している問題・エラーメッセージ

calendar.js:32 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
    at calendar.js:32:52

calendar.js内のdocument.getElementById("year").innerHTML = createYearにエラーが出て、カレンダーが表示されません。

該当のソースコード

function makeCalendar(){
    const res = document.createElement('div')
    res.innerHTML = 
    `
        <div class="container-calendar">
          <h4 id="monthAndYear"></h4>
          <div class="button-container-calendar">
              <button id="previous" onclick="previous()">‹</button>
              <button id="next" onclick="next()">›</button>
          </div>
          
          <table class="table-calendar" id="calendar" data-lang="ja">
              <thead id="thead-month"></thead>
              <tbody id="calendar-body"></tbody>
          </table>
          
          <div class="footer-container-calendar">
              <label for="month">日付指定：</label>
              <select id="month" onchange="jump()">
                  <option value=0>1月</option>
                  <option value=1>2月</option>
                  <option value=2>3月</option>
                  <option value=3>4月</option>
                  <option value=4>5月</option>
                  <option value=5>6月</option>
                  <option value=6>7月</option>
                  <option value=7>8月</option>
                  <option value=8>9月</option>
                  <option value=9>10月</option>
                  <option value=10>11月</option>
                  <option value=11>12月</option>
              </select>
              <select id="year" onchange="jump()"></select>
        </div>
        <script src="js/calendar.js" type="text/javascript"></script>
    `
    return res
}

function generate_year_range(start, end) {
    var years = "";
    for (var year = start; year <= end; year++) {
        years += "<option value='" + year + "'>" + year + "</option>";
    }
    return years;
  }
  
  var today = new Date();
  var currentMonth = today.getMonth();
  var currentYear = today.getFullYear();
  var selectYear = document.getElementById("year");
  var selectMonth = document.getElementById("month");
  
  var createYear = generate_year_range(1970, 2200);
  //↓ここでエラーが出てしまいます。
  document.getElementById("year").innerHTML = createYear;

試したこと

不可解なのが、エラーが出るコードの上の var selectYear = document.getElementById("year");はエラーが出ずに読み込めている点です。
また、calendar.jsはmakeCalendar()の最後に読み込んでいるため、jsが読み込まれているときにはすでに"year"は存在していると考えています。

皆さんのお力を貸してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

index.js内のmakeCalendar関数でカレンダーのhtmlを作成して、そこにcalendar.jsを読み込んでいる状況です。

innerHTML への代入で作られた<script>は、実行されません。makeCalendar() が呼ばれるより前にどこかで calendar.js をロードしているはずです。

calendar.js の内容を関数に入れて、maekCalendar() を呼んだ後にその関数を呼ぶのはいかがでしょうか。

Comments

[bicLighter]

回答ありがとうございます。勉強になりました。
回答を参考にmakeCalendar関数の最後にscriptを指定することで解決できました。
```
const el = document.createElement('script')
el.src = 'js/calendar.js'
res.append(el)
```