質問編集履歴

1

追記部分

2020/04/11 06:26

投稿

kokok
kokok

スコア145

test CHANGED
File without changes
test CHANGED
@@ -103,3 +103,191 @@
103
103
 
104
104
 
105
105
  動的に変数名を変える方法がなかなか分からなかったのでアドバイスいただけると助かります。
106
+
107
+
108
+
109
+
110
+
111
+
112
+
113
+
114
+
115
+ --追記----
116
+
117
+
118
+
119
+ やりたいことは、hmtlボタンに対して(複数のボタン)に対してイベントを仕込みたいと思っております。
120
+
121
+
122
+
123
+ 動的な変数名ではなくて配列にしてみました。
124
+
125
+
126
+
127
+
128
+
129
+ ```js
130
+
131
+ array_btn[i].addEventListener('click',()=>{
132
+
133
+
134
+
135
+
136
+
137
+ //undefinedになってしまう
138
+
139
+ console.log(array_btn[i]);
140
+
141
+ answer_toggle(array_btn[i], array_answer[i]);
142
+
143
+
144
+
145
+ });
146
+
147
+
148
+
149
+ ```
150
+
151
+
152
+
153
+ しかし、上記のところで,array_btn[i]がundefinedになってしまいます。
154
+
155
+
156
+
157
+ これは、clickした時に、イベントが走るから、array_btn[i]は未定義になるのでしょうか?
158
+
159
+
160
+
161
+
162
+
163
+
164
+
165
+
166
+
167
+
168
+
169
+ ```js
170
+
171
+
172
+
173
+
174
+
175
+
176
+
177
+
178
+
179
+
180
+
181
+ {
182
+
183
+
184
+
185
+ var array_btn = [];
186
+
187
+ var array_answer = [];
188
+
189
+ var array_delete_answer = [];
190
+
191
+
192
+
193
+ for (var i = 41; i < 43; i++) {
194
+
195
+
196
+
197
+
198
+
199
+ array_btn.push( document.getElementById('btn' + i));
200
+
201
+ array_answer.push( document.getElementById('answer' + i));
202
+
203
+ array_delete_answer.push( document.getElementById('delete' + i));
204
+
205
+
206
+
207
+
208
+
209
+ }
210
+
211
+
212
+
213
+
214
+
215
+ for (var i = 0; i < array_btn.length; i++) {
216
+
217
+
218
+
219
+
220
+
221
+ array_btn[i].addEventListener('click',()=>{
222
+
223
+
224
+
225
+
226
+
227
+ //undefinedになってしまう
228
+
229
+ console.log(array_btn[i]);
230
+
231
+ answer_toggle(array_btn[i], array_answer[i]);
232
+
233
+
234
+
235
+ });
236
+
237
+
238
+
239
+ array_delete_answer[i].addEventListener('click',()=>{
240
+
241
+
242
+
243
+ answer_toggle(array_btn[i],array_answer[i]);
244
+
245
+
246
+
247
+ });
248
+
249
+
250
+
251
+ }
252
+
253
+
254
+
255
+
256
+
257
+ //受け取った領域の表示・非表示を変える
258
+
259
+ function answer_toggle(btn,answer) {
260
+
261
+
262
+
263
+
264
+
265
+ if(btn.classList.contains('hidden') === true){
266
+
267
+
268
+
269
+ btn.classList.remove('hidden');
270
+
271
+ answer.classList.add('hidden');
272
+
273
+
274
+
275
+ }else{
276
+
277
+
278
+
279
+ btn.classList.add('hidden');
280
+
281
+ answer.classList.remove('hidden');
282
+
283
+ }
284
+
285
+ }
286
+
287
+
288
+
289
+ }
290
+
291
+
292
+
293
+ ```