### 前提・実現したいこと fetch apiでJSONファイルを読込み出力し、さらに出力データをアコーディオンメニューにしようとしています。 JSONファイルの出力はできたのですがアコーディオンメニューの実装中にundefinedになっていまします。 ### fetch apiでJSONファイルを読込み出力 ```javascript let resortListUrl = "https://script.googleusercontent.com/macros/echo?user_content_key=UoVvVXWpytG2ol8Tsn8cuej65rsqHMqxtw5xG-HYXarMzbMMgWIUurmoy2I7CHC3ZxeFk3D9SZxSnnlWUx67KmryZ18v1yhJm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnJ-UaAwDg0uRrxX2mlPzzQZYW-kH8X3RdXPvSR0p8JW5c0RmzB0v9RHe0Y0CjQWvjWSZiEOHtfR-16-v9YLNsT0kkYbkGyEe8Q&lib=Mra_Vp85i2zO-JFqqYajL2ey7DX5kpduB"; fetch(resortListUrl, { method: "GET", }) .then(response => response.json()) .then(json => { let listHtml = "

都道府県

"; let asideWrapper = document.getElementById("aside-wrapper"); asideWrapper.innerHTML = listHtml; }) ``` ```HTML

``` ### 試したこと上記のJSONデータの読込と出力はうまくいきますが、下記のtoggleメソッドを追加してアコーディオンメニューを実装しようとするとundefinedeエラーが出てしまいます ### 上記にthenで繋いでアコーディオンメニュー追加したい ```javascript .then(listHtml => { let asideWrapper = document.getElementById("aside-wrapper"); asideWrapper.innerHTML = listHtml; document.addEventListener("load", () => { const region = document.getElementsByClassName('.region'); for (let i = 0; i < region.length; i++) { let regionEach = region[i]; let content = regionEach.nextElementSibling; regionEach.addEventListener('click', () => { regionEach.classList.toggle('is-active'); content.classList.toggle('is-open'); }); } }) }); ``` ```CSS .region::after { transform: rotate(90deg); transition-duration: .3s; } .region.is-active::before { opacity: 0; } .region.is-active::after { transform: rotate(0); } .acc-contents { height: 0; overflow: hidden; opacity: 0; transition-duration: .3s; } .acc-contents.is-open { line-height: normal; } ``` ### 補足情報実装方法お分かりになる方、ご教授ください。

都道府県

" + json[j]["area"] + "

	@@ -1 +1 @@
1	- 非同期で読み込む外部JSONファイルの読込出力完了後にに関数を実行したい
1	+ 非同期で読み込む外部JSONファイルの読込出力完了後に関数を実行したい

質問編集履歴