各表のチェックボックスを選べばその合計点が技得点に加算され、グループⅠ〜Ⅱの中で一つでも技が選択されていれば1グループにつき0.5点をグループ得点に加算し、グループ得点と技得点の合計を一番上の合計得点に表示するという機能を付けています。しかしグループⅢは
・一つの技しか選択できない
・グループ得点はA難度を選べば0.1点、B難度なら0.2点、C難度なら0.3点、D難度以上なら0.5点をグループ得点に加算する
・技得点は他のグループと同様に技得点に加算する
という機能を持たせるため、チェックボックスではなく、ラヂオボックスにして上記のコードにグループⅢを追加して以下のコードを書きました。しかし確認すると動きませんでした。チェックボックスとラヂオボックスを同様に扱っていることが問題なのでしょうか。どなたか解決策ご存知の方いらっしゃいましたら是非教えて下さい。
HTML
1<!DOCTYPE html> 2<html="ja"> 3<head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="floor3.css"> 6 <title>floor Dscore</title> 7 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 8 <script> 9 $(function() { 10 11 function calc_group_score(num1,num2){ 12 var sum_g_point=0; 13 if(num1 != 0){ 14 sum_g_point += 0.5; 15 } 16 if(num2 != 0){ 17 sum_g_point += 0.5; 18 } 19 20 } 21 console.log('グループ得点:'+sum_g_point); 22 return sum_g_point; 23 } 24 25 function calc_waza_score(num1,num2){ 26 var sum_point=0; 27 sum_point = Math.round(10 * (num1 + num2)) / 10; 28 console.log('技得点:'+sum_point); 29 return sum_point; 30 } 31 32 function calc_total_score(num1,num2){ 33 var total_point = 0; 34 total_point = num1 + num2; 35 console.log('合計得点:'+total_point); 36 return total_point; 37 } 38 39 var sum_scores1 = () => 40 $('input[type="checkbox"].G1:checked') 41 .map((_, e) => +e.value) 42 .get() 43 .reduce((sum, e) => sum + e, 0); 44 45 var sum_scores2 = () => 46 $('input[type="checkbox"].G2:checked') 47 .map((_, e) => +e.value) 48 .get() 49 .reduce((sum, e) => sum + e, 0); 50 51 $('input[type="checkbox"]').change(function () { 52 53 54 var group_point = calc_group_score(sum_scores1(),sum_scores2()); 55 console.log(group_point); 56 $('#group_total').text(group_point); 57 var waza_point = calc_waza_score(sum_scores1(),sum_scores2()); 58 console.log(waza_point); 59 $('#waza_total').text(waza_point); 60 var total = calc_total_score(group_point, waza_point) 61 console.log(total); 62 $('#all_total').text(total); 63 }); 64 65 $('input[type=checkbox].G1').change(function () { 66 $('#total_1').text(Math.round(10 * sum_scores1()) / 10); 67 }); 68 $('input[type=checkbox].G2').change(function () { 69 $('#total_2').text(Math.round(10 * sum_scores2()) / 10); 70 }); 71 }); 72 </script> 73</head> 74<body> 75 <h1>合計得点:<span id="all_total">0</span>点 </h1> 76 <h2>技得点:<span id="waza_total">0</span>点 </h2> 77 <h2>グループ得点:<span id="group_total">0</span>点 </h2> 78 <div class= "group1"> 79 <table border="" width="840px" height="700"> 80 <tr><th colspan=6 height="10%"><input type = "checkbox" class="G1" value = "0.5" id="G1">グループⅠ</th></tr> 81 <tr width="16%" height="10%"> 82 <th>A難度</th><th>B難度</th><th>C難度</th><th> 83 D難度</th><th>E難度</th><th>F難度</th> 84 </tr> 85 <tr align="center"> 86 <td> 87 <input type="checkbox" class="G1" value="0.1" id="g1" /><label for="g1">後振り上がり倒立</label> 88 </td> 89 <td> 90 <input type="checkbox" class="G1" value="0.2" id="g2" /><label for="g2">片逆手後ろ振り上がり一回ひねり(片逆手)倒立</label> 91 </td> 92 <td> 93 <input type="checkbox" class="G1" value="0.3" id="g3" /><label for="g3"></label> 94 </td> 95 <td> 96 <input type="checkbox" class="G1" value="0.4" id="g4" /><label for="g4"></label> 97 </td> 98 <td> 99 <input type="checkbox" class="G1" value="0.5" id="g5" /><label for="g5"></label> 100 </td> 101 <td> 102 <input type="checkbox" class="G1" value="0.6" id="g6" /><label for="g6"></label> 103 </td> 104 </tr> 105 106 <tr> 107 <td colspan="6" align="center"> 108 合計点:<span id="total_1">0</span>点 109 </td> 110 </tr> 111 </table> 112</div> 113 114<div class= "group2"> 115 <table border="" width="840px" height="700"> 116 <tr><th colspan=6 height="10%"><input type = "checkbox" class="G2" value = "0.5" id="G2">グループⅡ</th></tr> 117 <tr width="16%" height="10%"> 118 <th>A難度</th><th>B難度</th><th>C難度</th><th> 119 D難度</th><th>E難度</th><th>F難度</th> 120 </tr> 121 <tr align="center"> 122 <td> 123 <input type="checkbox" class="G2" value="0.1" id="g7" /><label for="g7">前宙</label> 124 </td> 125 <td> 126 <input type="checkbox" class="G2" value="0.2" id="g8" /><label for="g8">前宙</label> 127 </td> 128 <td> 129 <input type="checkbox" class="G2" value="0.3" id="g9" /><label for="g9">前宙</label> 130 </td> 131 <td> 132 <input type="checkbox" class="G2" value="0.4" id="g10" /><label for="g10">前宙</label> 133 </td> 134 <td> 135 <input type="checkbox" class="G2" value="0.5" id="g11" /><label for="g11">前宙</label> 136 </td> 137 <td> 138 <input type="checkbox" class="G2" value="0.6" id="g12" /><label for="g12">前宙</label> 139 </td> 140 </tr> 141 142 <tr> 143 <td colspan="6" align="center"> 144 合計点:<span id="total_2">0</span>点 145 </td> 146 </tr> 147 </table> 148</div> 149</table> 150</div> 151 152<script="script.js"></script> 153</body> 154</html> 155 156 157```HTML 158コード 159```<!DOCTYPE html> 160<html="ja"> 161<head> 162 <meta charset="utf-8"> 163 <link rel="stylesheet" href="floor3.css"> 164 <title>floor Dscore</title> 165 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 166 <script> 167 $(function() { 168 169 function calc_group_score(num1,num2,num3,){ 170 var sum_g_point=0; 171 if(num1 != 0){ 172 sum_g_point += 0.5; 173 } 174 if(num2 != 0){ 175 sum_g_point += 0.5; 176 } 177 178 if(num3 = 0.1){ 179 sum_g_point += 0.1; 180 } 181 if(num3 = 0.2){ 182 sum_g_point += 0.2; 183 } 184 if(num3 = 0.3){ 185 sum_g_point += 0.3; 186 } 187 if(num3 >= 0.4){ 188 sum_g_point += 0.5; 189 } 190 191 console.log('グループ得点:'+sum_g_point); 192 return sum_g_point; 193 } 194 195 function calc_waza_score(num1,num2,num3){ 196 var sum_point=0; 197 sum_point = Math.round(10 * (num1 + num2 + num3 )) / 10; 198 console.log('技得点:'+sum_point); 199 return sum_point; 200 } 201 202 function calc_total_score(num1,num2){ 203 var total_point = 0; 204 total_point = num1 + num2; 205 console.log('合計得点:'+total_point); 206 return total_point; 207 } 208 209 var sum_scores1 = () => 210 $('input[type="checkbox"].G1:checked') 211 .map((_, e) => +e.value) 212 .get() 213 .reduce((sum, e) => sum + e, 0); 214 215 var sum_scores2 = () => 216 $('input[type="checkbox"].G2:checked') 217 .map((_, e) => +e.value) 218 .get() 219 .reduce((sum, e) => sum + e, 0); 220 221 222 223 var sum_scores3 = () => 224 $('input[type="radio"].G3:checked') 225 .map((_, e) => +e.value) 226 .get() 227 .reduce((sum, e) => sum + e, 0); 228 $('input[type="checkbox"]','input[type="radio"]').change(function () { 229 var group_point = calc_group_score(sum_scores1(),sum_scores2(),sum_scores3()); 230 console.log(group_point); 231 $('#group_total').text(group_point); 232 var waza_point = calc_waza_score(sum_scores1(),sum_scores2(),sum_scores3()); 233 console.log(waza_point); 234 $('#waza_total').text(waza_point); 235 var total = calc_total_score(group_point, waza_point) 236 console.log(total); 237 $('#all_total').text(total); 238 }); 239 240 $('input[type=checkbox].G1').change(function () { 241 $('#total_1').text(Math.round(10 * sum_scores1()) / 10); 242 }); 243 $('input[type=checkbox].G2').change(function () { 244 $('#total_2').text(Math.round(10 * sum_scores2()) / 10); 245 }); 246 $('input[type=radio].G3').change(function () { 247 $('#total_3').text(Math.round(10 * sum_scores3()) / 10); 248 }); 249 250 251 }); 252 </script> 253</head> 254 255</body> 256</html> 257
回答2件
あなたの回答
tips
プレビュー