回答編集履歴
2
全面的な修正
answer
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
|
+
#### 原因
|
|
1
|
-
|
|
2
|
+
131行目~140行目
|
|
2
3
|
```JavaScript
|
|
4
|
+
//選択肢をクリックしたときの動作
|
|
5
|
+
|
|
3
6
|
let handlerIndex=0;
|
|
4
7
|
while(handlerIndex<answerLength){
|
|
5
8
|
$answerW[handlerIndex].addEventListener("click",(e)=>{
|
|
@@ -9,37 +12,55 @@
|
|
|
9
12
|
};
|
|
10
13
|
//clickHandlerEを全ての選択肢に設定
|
|
11
14
|
```
|
|
12
|
-
|
|
15
|
+
インデントのせいで分かりづらいですが、この箇所は実際には**ページを読み込んだタイミングで実行されます**。そのため、選択肢のボタンには問題の難易度に関わらず初級用のイベントリスナーが設定され、中級を選んでも途中から初級と同じ処理が実行されてしまいます。
|
|
13
16
|
|
|
17
|
+
176行目~
|
|
18
|
+
```JavaScript
|
|
14
|
-
|
|
19
|
+
//選択肢をクリックしたときの動作
|
|
15
20
|
|
|
21
|
+
while(handlerIndex<answerLength){
|
|
22
|
+
$answerW[handlerIndex].addEventListener("click",(e)=>{
|
|
23
|
+
clickHandlerM(e);
|
|
24
|
+
});
|
|
25
|
+
handlerIndex++;
|
|
26
|
+
};
|
|
27
|
+
//clickHandlerEを全ての選択肢に設定
|
|
28
|
+
```
|
|
29
|
+
こちらも、ページを読み込んだタイミングで実行されています。ただし`handlerIndex`の値が131行目~140行目の処理後の値のままなので、whileループの中身は1度も実行されません。
|
|
30
|
+
|
|
16
31
|
#### 修正例(一部)
|
|
32
|
+
27行目から余計なインデントがついているせいで、コードがいつ実行されるのかが分かりにくくなっています。
|
|
33
|
+
コードの読みやすさのためにも、インデントは正確につけましょう。
|
|
34
|
+
|
|
35
|
+
難易度のボタンをクリックしたタイミングで、難易度に応じたイベントリスナーを選択肢のボタンに設定すると正しく動きます。
|
|
17
36
|
```JavaScript
|
|
18
|
-
//
|
|
37
|
+
//110行目~
|
|
19
|
-
|
|
38
|
+
$easy.onclick = function(){
|
|
20
|
-
|
|
39
|
+
setUpQuizE();
|
|
21
|
-
|
|
40
|
+
let handlerIndex=0;
|
|
22
|
-
|
|
41
|
+
while(handlerIndex<answerLength){
|
|
23
|
-
|
|
42
|
+
$answerW[handlerIndex].addEventListener("click",(e)=>{
|
|
24
|
-
|
|
43
|
+
clickHandlerE(e);
|
|
25
|
-
|
|
44
|
+
});
|
|
26
|
-
|
|
45
|
+
handlerIndex++;
|
|
27
|
-
};
|
|
28
|
-
//clickHandlerEを全ての選択肢に設定
|
|
29
46
|
};
|
|
47
|
+
//clickHandlerEを全ての選択肢に設定
|
|
48
|
+
};
|
|
30
49
|
|
|
31
|
-
//
|
|
50
|
+
//133行目~139行目のコードは削除
|
|
32
51
|
|
|
33
52
|
//154行目~
|
|
34
|
-
|
|
53
|
+
$middle.onclick = function(){
|
|
35
|
-
|
|
54
|
+
setUpQuizM();
|
|
36
|
-
|
|
55
|
+
let handlerIndex=0;
|
|
37
|
-
|
|
56
|
+
while(handlerIndex<answerLength){
|
|
38
|
-
|
|
57
|
+
$answerW[handlerIndex].addEventListener("click",(e)=>{
|
|
39
|
-
|
|
58
|
+
clickHandlerM(e);
|
|
40
|
-
|
|
59
|
+
});
|
|
41
|
-
|
|
60
|
+
handlerIndex++;
|
|
42
|
-
};
|
|
43
|
-
//clickHandlerMを全ての選択肢に設定
|
|
44
61
|
};
|
|
62
|
+
//clickHandlerMを全ての選択肢に設定
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
//176行目~のコードは削除
|
|
45
66
|
```
|
1
修正前コードの修正
answer
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
133行目~
|
|
1
|
+
133行目~140行目
|
|
2
2
|
```JavaScript
|
|
3
|
-
let handlerIndex
|
|
3
|
+
let handlerIndex=0;
|
|
4
|
-
while
|
|
4
|
+
while(handlerIndex<answerLength){
|
|
5
|
-
|
|
5
|
+
$answerW[handlerIndex].addEventListener("click",(e)=>{
|
|
6
|
-
|
|
6
|
+
clickHandlerE(e);
|
|
7
|
-
|
|
7
|
+
});
|
|
8
|
-
|
|
8
|
+
handlerIndex++;
|
|
9
|
-
};
|
|
9
|
+
};
|
|
10
|
+
//clickHandlerEを全ての選択肢に設定
|
|
10
11
|
```
|
|
11
12
|
選択肢をクリックしたときに呼び出されるイベントリスナーが、問題の難易度に関わらず初級用のものになっており、中級を選んでいても初級と同じ処理になってしまっています。
|
|
12
13
|
|