質問編集履歴

3

書式の改善、コードの変更

2019/06/26 01:04

投稿

kuuuuuya
kuuuuuya

スコア29

test CHANGED
File without changes
test CHANGED
@@ -10,9 +10,7 @@
10
10
 
11
11
  <meta charset="utf-8">
12
12
 
13
- <link rel="stylesheet" href="rings.css">
14
-
15
- <title>floor Dscore</title>
13
+ <title></title>
16
14
 
17
15
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
18
16
 
@@ -20,65 +18,39 @@
20
18
 
21
19
  $(function() {
22
20
 
23
-
24
-
25
- $('input').change(function(){
21
+ $('.group input[type="checkbox"]').on("change", function () {
26
-
22
+
27
- var orders = [];
23
+ var orders = [];
28
-
29
- for(var i=0; i< input.length; i++) {//object一つ一つにEventListenerを付与
24
+
30
-
31
- input[i].addEventListener("change", function(e){
25
+ $('.group input:checked').each(function () {
32
-
33
- if(e.target.checked) {
26
+
34
-
35
- orders.push(e.target.parent().text());//クリックされたらorderの末尾に追加
36
-
37
- } else {
38
-
39
- //チェックが外れたら外れたものをordersから削除
40
-
41
- for (var k = 0; k < orders.length; k ++) {
42
-
43
- if(orders[k] == e.target.parent().text()) {
27
+ orders.push($(this).parent().text());
44
-
28
+
45
- orders.splice(k, 1);
29
+ console.log(orders);
46
-
47
- }
30
+
48
-
49
- }
50
-
51
- }
52
-
53
- });
31
+ });
54
-
55
-
56
-
57
- $(".show1").change(function(){
32
+
58
-
33
+
34
+
59
- $(".show1").text(orders[0]);
35
+ $("#show1").text(orders[0]);
36
+
60
-
37
+ $("#show2").text(orders[1]);
38
+
39
+ $("#show3").text(orders[2]);
40
+
41
+ $("#show4").text(orders[3]);
42
+
61
- });
43
+ });
62
-
63
-
64
-
65
- $(".show1").change(function(){
44
+
66
-
67
- $(".show2").text(orders[1]);
45
+
68
-
69
- });
46
+
70
-
71
-
72
-
73
- $(".show1").change(function(){
47
+    
74
-
75
- $(".show2").text(orders[2]);
48
+
76
-
77
- });
49
+
78
-
79
-
80
-
81
- });
50
+
51
+
52
+
53
+
82
54
 
83
55
  </script>
84
56
 
@@ -88,141 +60,113 @@
88
60
 
89
61
  <div class="top">
90
62
 
63
+
64
+
91
- <div class="top_score">
65
+ <div class="top_graph">
92
-
66
+
93
- <h1>合計得点:<span id="all_total">0</span>点 </h1>
67
+ <table border="" class = "graph">
94
-
95
- <h2>技得点:<span id="waza_total">0</span>点 </h2>
68
+
96
-
97
- <h2>グループ得点:<span id="group_total">0</span>点 </h2>
69
+ <tr>
98
-
70
+
99
- <h2>ND:<span id="ND">0.3</span>点 </h2>
71
+ <th colspan=1 height="10%" width = "10%"></th>
100
-
72
+
101
- <h2>技数減点:<span id="waza_number">0</span>点 </h2>
73
+ <th colspan=2 height="10%" width = "90%">/th>
74
+
75
+ </tr>
76
+
77
+ <tr align="center" class = "skill">
78
+
79
+ <td width = "10%">
80
+
81
+
82
+
83
+ </td>
84
+
85
+ <td width = "10%">1</td>
86
+
87
+ <td width = "90%" id="show1">
88
+
89
+
90
+
91
+ </td>
92
+
93
+ </tr>
94
+
95
+ <tr align="center" class = "skill">
96
+
97
+ <td width = "10%">
98
+
99
+
100
+
101
+ </td>
102
+
103
+ <td width = "10%">2</td>
104
+
105
+ <td width = "90%" id="show2">
106
+
107
+
108
+
109
+ </td>
110
+
111
+ </tr>
112
+
113
+ <tr align="center">
114
+
115
+ <td width = "10%">
116
+
117
+
118
+
119
+ </td>
120
+
121
+ <td width = "10%">3</td>
122
+
123
+ <td width = "90%" id="show3">
124
+
125
+
126
+
127
+ </td>
128
+
129
+ </tr>
130
+
131
+ <tr align="center">
132
+
133
+ <td width = "10%">
134
+
135
+
136
+
137
+ </td>
138
+
139
+ <td width = "10%">4</td>
140
+
141
+ <td width = "90%" id="show4">
142
+
143
+
144
+
145
+ </td>
146
+
147
+ </tr>
148
+
149
+
150
+
151
+ </table>
102
152
 
103
153
  </div>
104
154
 
105
- <div class="top_graph">
106
-
107
- <table border="" class = "graph">
108
-
109
- <tr>
110
-
111
- <th colspan=1 height="10%" width = "10%">終末技</th>
112
-
113
- <th colspan=2 height="10%" width = "90%">選択した技</th>
114
-
115
- </tr>
116
-
117
- <tr align="center" class = "skill">
118
-
119
- <td width = "10%">
120
-
121
- <input type="radio" >
122
-
123
- </td>
124
-
125
- <td width = "10%">1</td>
126
-
127
- <td width = "90%" class="show_skill">
128
-
129
- 技を選択してください
130
-
131
- </td>
132
-
133
- </tr>
134
-
135
- <tr align="center" class = "skill">
136
-
137
- <td width = "10%">
138
-
139
- <input type="radio" >
140
-
141
- </td>
142
-
143
- <td width = "10%">2</td>
144
-
145
- <td width = "90%" >
146
-
147
- 技を選択してください
148
-
149
- </td>
150
-
151
- </tr>
152
-
153
- <tr align="center">
154
-
155
- <td width = "10%">
156
-
157
- <input type="radio" >
158
-
159
- </td>
160
-
161
- <td width = "10%">3</td>
162
-
163
- <td width = "90%">
164
-
165
- 技を選択してください
166
-
167
- </td>
168
-
169
- </tr>
170
-
171
- <tr align="center">
172
-
173
- <td width = "10%">
174
-
175
- <input type="radio" >
176
-
177
- </td>
178
-
179
- <td width = "10%">4</td>
180
-
181
- <td width = "90%">
182
-
183
- 技を選択してください
184
-
185
- </td>
186
-
187
- </tr>
188
-
189
- <tr align="center">
190
-
191
- <td width = "10%">
192
-
193
- <input type="radio" >
194
-
195
- </td>
196
-
197
- <td width = "10%">5</td>
198
-
199
- <td width = "90%">
200
-
201
- 技を選択してください
202
-
203
- </td>
204
-
205
- </tr>
206
-
207
- </table>
208
-
209
155
  </div>
210
156
 
211
- </div>
212
-
213
157
  <div class ="group">
214
158
 
215
159
  <div class= "group1">
216
160
 
217
161
  <table border="" width="840px" height="700" class = "graph_s">
218
162
 
219
- <tr><th colspan=6 height="10%" >グループⅠ : 振動・振動倒立技</th></tr>
163
+ <tr><th colspan=6 height="10%" ></th></tr>
220
164
 
221
165
  <tr width="16%" height="10%">
222
166
 
223
- <th>A難度</th><th>B難度</th><th>C難度</th><th>
167
+ <th></th><th></th><th></th><th>
224
-
168
+
225
- D難度</th><th>E難度</th><th>F難度</th>
169
+ </th><th></th><th></th>
226
170
 
227
171
  </tr>
228
172
 
@@ -230,249 +174,41 @@
230
174
 
231
175
  <td>
232
176
 
233
- <label><input type="checkbox" class="G1" value="0.1" >懸垂前振り上がり支持</label>
177
+ <label><input type="checkbox" class="G1" value="0.1" >aaa</label>
234
-
178
+
235
- </td>
179
+ </td>
236
-
180
+
237
- <td>
181
+ <td>
182
+
238
-
183
+ <label><input type="checkbox" class="G1" value="0.2" >bbb</label>
239
-
240
-
184
+
241
- </td>
185
+ </td>
242
-
186
+
243
- <td>
187
+ <td>
188
+
244
-
189
+ <label><input type="checkbox" class="G1" value="0.3" >ccc</label>
245
-
246
-
190
+
247
- <td>
191
+ <td>
192
+
248
-
193
+ <label><input type="checkbox" class="G1" value="0.4" >ddd</label>
249
-
250
-
194
+
251
- </td>
195
+ </td>
252
-
196
+
253
- <td>
197
+ <td>
198
+
254
-
199
+ <label><input type="checkbox" class="G1" value="0.5" >eee</label>
255
-
256
-
200
+
257
- </td>
201
+ </td>
258
-
202
+
259
- <td>
203
+ <td>
204
+
260
-
205
+ <label><input type="checkbox" class="G1" value="0.6" >fff</label>
261
-
262
206
 
263
207
  </td>
264
208
 
265
209
  </tr>
266
210
 
267
- <tr align="center">
211
+
268
-
269
- <td>
270
-
271
-  <label><input type="checkbox" class="G1" value="0.1" >支持後ろ振り、前に回りながら懸垂(*前ロール) </label>
272
-
273
- </td>
274
-
275
- <td>
276
-
277
- <label><input type="checkbox" class="G1" value="0.2" >(背面懸垂)前振り上がり支持前方回転振り出し懸垂後ろ振り(ケキ)(ショラニー)</label>
278
-
279
- </td>
280
-
281
- <td>
282
-
283
-
284
-
285
- </td>
286
-
287
- <td>
288
-
289
-
290
-
291
- </td>
292
-
293
- <td>
294
-
295
-
296
-
297
- </td>
298
-
299
- <td>
300
-
301
-
302
-
303
- </td>
304
-
305
- </tr>
306
-
307
- <tr align="center">
308
-
309
- <td>
310
-
311
- <label><input type="checkbox" class="G1" value="0.1" >懸垂から伸腕前振り出し(肩が輪の高さ以上)(ナカヤマ)</label>
312
-
313
- </td>
314
-
315
- <td>
316
-
317
-
318
-
319
- </td>
320
-
321
- <td>
322
-
323
-
324
-
325
- </td>
326
-
327
- <td>
328
-
329
-
330
-
331
- </td>
332
-
333
- <td>
334
-
335
-
336
-
337
- </td>
338
-
339
- <td>
340
-
341
-
342
-
343
- </td>
344
-
345
- </tr>
346
-
347
- <tr align="center">
348
-
349
- <td>
350
-
351
-
352
-
353
- </td>
354
-
355
- <td>
356
-
357
- <label><input type="checkbox" class="G1" value="0.2" >懸垂(支持)後ろ振り出し、背面懸垂前振り上がり(リーニン)(リーニン2)</label>
358
-
359
- </td>
360
-
361
- <td>
362
-
363
-
364
-
365
- </td>
366
-
367
- <td>
368
-
369
-
370
-
371
- </td>
372
-
373
- <td>
374
-
375
-
376
-
377
- </td>
378
-
379
- <td>
380
-
381
-
382
-
383
- </td>
384
-
385
- </tr>
386
-
387
- <tr align="center">
388
-
389
- <td>
390
-
391
- <label><input type="checkbox" class="G1" value="0.1" >ほん転逆上がり支持</label>
392
-
393
- </td>
394
-
395
- <td>
396
-
397
- <label><input type="checkbox" class="G1" value="0.2" >伸腕ほん転逆上がり倒立経過(*車輪)</label>
398
-
399
- </td>
400
-
401
- <td>
402
-
403
- <label><input type="checkbox" class="G1" value="0.3" >後方抱え込み2回宙返り懸垂(グチョギー)</label>
404
-
405
- </td>
406
-
407
- <td>
408
-
409
- <label><input type="checkbox" class="G1" value="0.4" >後方屈伸2回宙返り懸垂(*屈伸グチョギー)</label>
410
-
411
- </td>
412
-
413
- <td>
414
-
415
- <label><input type="checkbox" class="G1" value="0.5" >後方伸身2回宙返り懸垂(オニール) </label>
416
-
417
- </td>
418
-
419
- <td>
420
-
421
-
422
-
423
- </td>
424
-
425
- </tr>
426
-
427
- <tr align="center">
428
-
429
- <td>
430
-
431
- <label><input type="checkbox" class="G1" value="0.1" >後方屈伸(伸身)懸垂回転(*ディスロー)</label>
432
-
433
- </td>
434
-
435
- <td>
436
-
437
- <label><input type="checkbox" class="G1" value="0.2" >ほんてん逆上がり、脚を腕に乗せた開脚前挙支持(2秒)(デルチェフ)</label>
438
-
439
- </td>
440
-
441
- <td>
442
-
443
-
444
-
445
- </td>
446
-
447
- <td>
448
-
449
-
450
-
451
- </td>
452
-
453
- <td>
454
-
455
-
456
-
457
- </td>
458
-
459
- <td>
460
-
461
-
462
-
463
- </td>
464
-
465
- </tr>
466
-
467
- <tr>
468
-
469
- <td colspan="6" align="center">
470
-
471
- 合計点:<span id="total_1">0</span>点
472
-
473
- </td>
474
-
475
- </tr>
476
212
 
477
213
  </table>
478
214
 
@@ -480,7 +216,7 @@
480
216
 
481
217
  </div>
482
218
 
483
- <script="script.js"></script>
219
+ <script src="script.js"></script>
484
220
 
485
221
  </body>
486
222
 

2

書式の改善

2019/06/26 01:04

投稿

kuuuuuya
kuuuuuya

スコア29

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- class = group1 でチェックした要素文字列をチェックした順番にclass = top_graphに表示させる為にjavascriptでコードを書きましたがエラーが出てしまします。group1のチェックボックスにチェックを入れると、文字列を取得し、top_graphの1に表示させて、2番目にgroup1チェックボックスに表示した文字列をtop_graphの2番目に表示できるように以下のjsを書きました。
1
+ group1のチェックボックスにチェックを入れると、文字列を配列ordersに取得し、配列の文字列をshow1~3に表示させたく以下のコードを書きました。文字列がordersに格納されておらず、どなたか原因が分かる方はいらっしゃいませんか。
2
2
 
3
3
  ```jQuery
4
4
 
@@ -20,27 +20,61 @@
20
20
 
21
21
  $(function() {
22
22
 
23
+
24
+
23
25
  $('input').change(function(){
24
26
 
27
+ var orders = [];
28
+
29
+ for(var i=0; i< input.length; i++) {//object一つ一つにEventListenerを付与
30
+
31
+ input[i].addEventListener("change", function(e){
32
+
25
- if (this.checked) {
33
+ if(e.target.checked) {
26
-
34
+
27
- var show = $(this).parent().text();
35
+ orders.push(e.target.parent().text());//クリックされたらorderの末尾に追加
28
-
29
- console.log(show);
36
+
30
-
31
- $('.show_skill').text(show);
32
-
33
- $(this).removeClass("show_skill");
34
-
35
- $(this).next().addClass("show_skill");
36
-
37
- } else {
37
+ } else {
38
-
38
+
39
- $('.show_skill').text("技を選択して下さい");
39
+ //チェックが外れたら外れたものをordersから削除
40
+
40
-
41
+ for (var k = 0; k < orders.length; k ++) {
42
+
43
+ if(orders[k] == e.target.parent().text()) {
44
+
45
+ orders.splice(k, 1);
46
+
41
- }
47
+ }
48
+
42
-
49
+ }
50
+
51
+ }
52
+
43
- });
53
+ });
54
+
55
+
56
+
57
+ $(".show1").change(function(){
58
+
59
+ $(".show1").text(orders[0]);
60
+
61
+ });
62
+
63
+
64
+
65
+ $(".show1").change(function(){
66
+
67
+ $(".show2").text(orders[1]);
68
+
69
+ });
70
+
71
+
72
+
73
+ $(".show1").change(function(){
74
+
75
+ $(".show2").text(orders[2]);
76
+
77
+ });
44
78
 
45
79
 
46
80
 

1

書式の改善

2019/06/21 07:09

投稿

kuuuuuya
kuuuuuya

スコア29

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- class = group1 でチェックした要素の文字列をチェックした順番にclass = top_graphに表示させる為にjavascriptでコードを書きましたがエラーが出てしまします。どなか原因が分かはいらっしゃいますか?
1
+ class = group1 でチェックした要素の文字列をチェックした順番にclass = top_graphに表示させる為にjavascriptでコードを書きましたがエラーが出てしまします。group1のチェックボックスにチェックを入れると、文字列を取得し、top_graphの1番に表示させて、2番目にgroup1のチェックボックスに表示し文字列をtop_graphの2番目に表示できように以下のjsを書きまし
2
2
 
3
3
  ```jQuery
4
4