JavaScript Uncaught ReferenceError: を解決したい

Question

前提・実現したいこと

selectボックスの中身を動的に変更する仕組みをjsで実装しようとしていました。
genreボックスにて選択すると、createTagが呼び出されるのですが、そのcreateTag関数がうまく起動しません。

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

Uncaught ReferenceError: createTag is not defined at HTMLSelectElement.onchange

該当のソースコード

<script type="text/javascript">
    window.onload = function() {
    const taglist = {
    "english": ["ネットワーク", "IT基礎", "プログラミング言語"],
    "word": ["ネットワーク", "IT基礎", "フロントエンド"],
    "syntax": ["HTML","SQL", "Java", "PHP"]
  };
  function createTag(selectGenre) {
    let tags = document.getElementById('tag');
    tags.disabled = false;
    tags.innerHTML = '';
    let option = document.createElement('option');
    option.innerHTML('タグを選択してください');
    option.defaultSelected = true;
    option.disabled = true;
    menuList.appendChild(option);

    tagList[selectGenre].forEach( tag => {
      let option = document.createElement('option');
      option.innerHTML = tag;
      option.setAttribute('value', '' + tag + '');
      tags.appendChild(option);  
    });    
  }
}
</script>

<div class="input-area">
 <label for="genre">ジャンル</label>
 <select name="genre" onchange="createTag(this.value)">
  <option disabled selected>ジャンルを選択してください</option>
  <option value="english">英単語</option>
  <option value="word">IT用語</option>
  <option value="syntax">書式・文法・構文</option>
 </select>
</div>
<div class="input-area">
 <label for="tag">タグ</label>
 <select name="tag" id="tag" disabled>
  <option disabled selected>タグを選択してください</option>
 </select>
</div>

試したこと

createTagなどスペルミスのチェック、jQueryなど他のスクリプトによる干渉がないかチェックを行いました。

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

vscode
PHP
xampp

Comments

[m.ts10806]

そのscript
どこにどのように書かれているのでしょう。
コードの全体の流れが分かるようにご提示ください

Answer 1

createTagがwindow.onloadの関数の中に書かれているため、外側からはアクセスできません。

というより、window.onloadの中身が変数と関数の定義だけですので、window.onloadを書かずに直接書いてください。

<script type="text/javascript">
    const taglist = {
    "english": ["ネットワーク", "IT基礎", "プログラミング言語"],
    "word": ["ネットワーク", "IT基礎", "フロントエンド"],
    "syntax": ["HTML","SQL", "Java", "PHP"]
  };
  function createTag(selectGenre) {
    let tags = document.getElementById('tag');
    tags.disabled = false;
    tags.innerHTML = '';
    let option = document.createElement('option');
    option.innerHTML('タグを選択してください');
    option.defaultSelected = true;
    option.disabled = true;
    menuList.appendChild(option);

    tagList[selectGenre].forEach( tag => {
      let option = document.createElement('option');
      option.innerHTML = tag;
      option.setAttribute('value', '' + tag + '');
      tags.appendChild(option);  
    });    
  }
</script>

Comments

[pepe0730]

迅速な回答ありがとうございます。
window.onloadは状況に応じて使い分けることにします。