前提・実現したいこと
javascriptでセレクトボックスの値を動的に生成する方法についてなのですが、サイトを引用して実行したのですが、
javascriptが呼び出せてないようなのですが、どこが間違えているのでしょうか。
<引用したサイト>
https://techacademy.jp/magazine/27133
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <select name="genre" id="genre" onchange="createMenu(this.value)"> <option disabled selected>ジャンルを選択してください</option> <option value="japaneseFoods">和食</option> <option value="chineseFoods">中華</option> <option value="italianFoods">イタリアン</option> </select> <script type="text/javascript"> const foodMenu = { "japaneseFoods": ["寿司", "天ぷら", "おでん"], "chineseFoods": ["八宝菜", "麻婆豆腐", "エビチリ"], "italianFoods": ["パスタ", "ピザ", "ミネストローネ"] };javascript,html
1ソースコード
function createMenu(selectGenre){
let menuList = document.getElementById('menuList');
menuList.disabled = false;
menuList.innerHTML = '';
let option = document.createElement('option');
option.innerHTML = '料理を選択してください';
option.defaultSelected = true;
option.disabled = true;
menuList.appendChild(option);
foodMenu[selectGenre].forEach( menu => {
let option = document.createElement('option');
option.innerHTML = menu;
menuList.appendChild(option);
});
}
</script>
<select name="menuList" id="menuList" disabled>
<option disabled selected>料理を選択してください</option>
</select>
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー