teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

ソース修正

2021/08/31 13:01

投稿

退会済みユーザー
answer CHANGED
@@ -23,4 +23,54 @@
23
23
  ```
24
24
  がない現状だと、次のthenの`listHtml => {` の `listHtml` に何も渡されてこない、つまり undefined になるやろな思いますわ。
25
25
 
26
- うまくいくことを祈ってるで〜
26
+ うまくいくことを祈ってるで〜
27
+
28
+
29
+ **続き:**
30
+
31
+ よく見たら、ここがかなり怪しげなコードになってるゆうところがありましたわ。それは以下の部分
32
+
33
+ ```javascript
34
+ .then(listHtml => {
35
+ let asideWrapper = document.getElementById("aside-wrapper");
36
+ asideWrapper.innerHTML = listHtml;
37
+ document.addEventListener("load", () => {
38
+ const region = document.getElementsByClassName('.region');
39
+ for (let i = 0; i < region.length; i++) {
40
+ let regionEach = region[i];
41
+ let content = regionEach.nextElementSibling;
42
+ regionEach.addEventListener('click', () => {
43
+ regionEach.classList.toggle('is-active');
44
+ content.classList.toggle('is-open');
45
+ });
46
+ }
47
+ })
48
+ });
49
+ ```
50
+ の中の
51
+ ```javascript
52
+ document.addEventListener("load", () => {
53
+ ・・・
54
+ });
55
+ ```
56
+ の部分。これ、なんでloadハンドラをここでaddEventListenerしてるんや? っていう。これだと、 loadのリスナーとして設定している関数`() => { ・・・ }`  は、一度も呼ばれないと思います。なので、試しに以下の2行を削除してみるとどないになりますやろ?
57
+
58
+ ```diff
59
+ .then(listHtml => {
60
+ let asideWrapper = document.getElementById("aside-wrapper");
61
+ asideWrapper.innerHTML = listHtml;
62
+ - document.addEventListener("load", () => {
63
+ const region = document.getElementsByClassName('.region');
64
+ for (let i = 0; i < region.length; i++) {
65
+ let regionEach = region[i];
66
+ let content = regionEach.nextElementSibling;
67
+ regionEach.addEventListener('click', () => {
68
+ regionEach.classList.toggle('is-active');
69
+ content.classList.toggle('is-open');
70
+ });
71
+ }
72
+ - })
73
+ });
74
+ ```
75
+
76
+ 上の2行を削除すると、間に入っていた関数本体部分をインデント1個分左に寄せることになります。この修正で、すべてうまくいくかは分かりませんが、少なくとも、Promise の then に設定するコールバックの中に、documentのload リスナー関数を設定しても、設定した関数が呼ばれることは無いと思われるので、上記2行の削除は試してみる価値はあると思うてます。