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

質問編集履歴

2

javascript を修正しました。

2021/03/02 08:14

投稿

Suffenjoying
Suffenjoying

スコア10

title CHANGED
File without changes
body CHANGED
@@ -66,36 +66,52 @@
66
66
  let buttons = $docs.getElementsByClassName('option')
67
67
  let next = $docs.getElementsByClassName('btn-circle-fishy')[0]
68
68
 
69
+ if(i = 0) {
70
+ addClass()
69
71
 
70
- for(let i = 0; i < buttons.length; i++){
72
+ doAll()
71
- buttons[i].addEventListener('click', addClass)
72
73
  }
73
74
 
74
- // if (answer === clicked.value) {
75
- // matches += 1
76
- // }
77
- function addClass(e) {
75
+ function doAll () {
78
- let clicked = e.target
76
+ for(let j = 0; j < buttons.length; j++){
77
+ buttons[j].addEventListener('click', function() {
79
- clicked.classList.add('optionclicked')
78
+ buttons[j].classList.add('optionclicked')
79
+ next.addEventListener('click', function() {
80
+ if(answer === buttons[j].value) {
81
+ matches += 1
82
+ }
80
83
 
81
- next.addEventListener('click', function() {
82
- if(answer === clicked.value){
83
- matches += 1
84
+ removeClass()
85
+
86
+ displayNext()
87
+
84
- }
88
+ })
85
- div.remove()
86
-
87
89
  })
88
90
  }
89
91
 
90
- // if button is clicked addclass addevent e.target
91
- //if match? => matches++ div.remove
92
+ }
92
93
 
94
+ function displayNext () {
95
+ div[i+1].classList.add('pressed')
96
+ }
97
+
98
+ function removeClass () {
99
+ let divget = $docs.getElementsByClassName('pressed')[0]
100
+ divget.classList.remove('pressed')
101
+ }
102
+
103
+ function addClass() {
104
+ let ul = $docs.getElementsByClassName('ul')
105
+ ul[i].classList.add('pressed')
106
+ }
107
+
93
108
  }
94
109
  }
95
110
 
96
111
 
97
112
 
98
113
  $docs.addEventListener('DOMContentLoaded', getQuestions().then(question_list => displayQuestions(question_list)));
114
+
99
115
  ```
100
116
 
101
117
  ```

1

jsonファイルを追加しました。

2021/03/02 08:14

投稿

Suffenjoying
Suffenjoying

スコア10

title CHANGED
File without changes
body CHANGED
@@ -127,6 +127,64 @@
127
127
  </html>
128
128
  ```
129
129
 
130
+ ```
131
+ json
132
+ {
133
+ "questions": [
134
+ {
135
+ "question": "How many chairs are there?",
136
+ "fields": {
137
+ "a": 1,
138
+ "b": 2,
139
+ "c": 3,
140
+ "d": 4
141
+ },
142
+ "answer": 1
143
+ },
144
+ {
145
+ "question": "How many lights are there?",
146
+ "fields": {
147
+ "a": 1,
148
+ "b": 2,
149
+ "c": 3,
150
+ "d": 4
151
+ },
152
+ "answer": 3
153
+ },
154
+ {
155
+ "question": "What is it on the sofa?",
156
+ "fields": {
157
+ "a": "person",
158
+ "b": "stove",
159
+ "c": "cushions",
160
+ "d": "Beats me"
161
+ },
162
+ "answer": "cushions"
163
+ },
164
+ {
165
+ "question": "Where is the light bulb?",
166
+ "fields": {
167
+ "a": "desk",
168
+ "b": "table",
169
+ "c": "ceiling",
170
+ "d": "Beats me"
171
+ },
172
+ "answer": "table"
173
+ },
174
+ {
175
+ "question": "How many questions have you answered?",
176
+ "fields": {
177
+ "a": 1,
178
+ "b": 2,
179
+ "c": 3,
180
+ "d": 4
181
+ },
182
+ "answer": 3
183
+ }
184
+ ]
185
+ }
186
+ ```
187
+
130
188
  ### 試したこと
131
189
  for分をwhileにして、iを+1する場所を関数の最後に行うなどをしましたが、
132
190
  上手くいきませんでした。