Q&A
>機能しません
これは「エラーが出て動かない」のか「エラーは出てないのが動作が全くしない」「動くけど想定通りに動かない、〇〇のような現象が起きる」のかどれでしょうか。
また当該コードがどこまで想定通りに動いているか確認（デバッグ）はされましたか？
質問を編集して具体的に記載してください。
今checkboxを押したら、自動で計算できる表を書いています。
A難度=0.1,B難度=0.2という具合に加算されていきます。グループごとに合計点を出して全体での合計点を出すところまでは書けました。
更に、各グループについて一つでも技を選択したら+0.5点をh2のグループに加算する機能を付けたいです
javascriptの欄でif文でコードを書いたのですが機能しません。どなたか原因が分かる方はいらっしゃいませんか。
<!DOCTYPE html> <html="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="floor3.css"> <title>floor Dscore</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $(function() { //チェックボックス押した時の合計変数 const sum_scores1 = () => $('input[type="checkbox"].G1:checked') .map((_, e) => +e.value) .get() .reduce((sum, e) => sum + e, 0); const sum_scores2 = () => $('input[type="checkbox"].G2:checked') .map((_, e) => +e.value) .get() .reduce((sum, e) => sum + e, 0); const sum_scores3 = () => $('input[type="checkbox"].G3:checked') .map((_, e) => +e.value) .get() .reduce((sum, e) => sum + e, 0); var sum_group = 0; $('input[type=checkbox].G1').change(function () { $('#total_1').text(Math.round(10 * sum_scores1()) / 10); }); $('input[type=checkbox].G2').change(function () { $('#total_2').text(Math.round(10 * sum_scores2()) / 10); }); $('input[type=checkbox].G3').change(function () { $('#total_3').text(Math.round(10 * sum_scores3()) / 10); }); $('input[type=checkbox]').change(function () { $('#all_total').text(sum_scores1()+sum_scores2() + sum_scores3()); }); if (sum_scores1() !== 0){ sum_group += 0.5; $('#group_total').text(sum_group); }; if (sum_scores2() !== 0){ sum_group += 0.5; $('#group_total').text(sum_group); }; if (sum_scores3() !== 0){ sum_group += 0.5; $('#group_total').text(sum_group); }; }); </script> </head> <body> <h1>合計点：<span id="all_total">0</span>点 </h1> <h2>グループ：<span id="group_total">0</span>点 </h2> <div class= "group1"> <table border="" width="840px" height="700"> <tr><th colspan=6 height="10%">グループⅠ</th></tr> <tr width="16%" height="10%"> <th>A難度</th><th>B難度</th><th>C難度</th><th> D難度</th><th>E難度</th><th>F難度</th> </tr> <tr align="center"> <td> <input type="checkbox" class="G1" value="0.1" id="A1" /><label for="A1">前宙</label> </td> <td> <input type="checkbox" class="G1" value="0.2" id="B1" /><label for="B1">前宙</label> </td> <td> <input type="checkbox" class="G1" value="0.3" id="C1" /><label for="C1">前宙</label> </td> <td> <input type="checkbox" class="G1" value="0.4" id="D1" /><label for="D1">前宙</label> </td> <td> <input type="checkbox" class="G1" value="0.5" id="E1" /><label for="E1">前宙</label> </td> <td> <input type="checkbox" class="G1" value="0.6" id="F1" /><label for="F1">前宙</label> </td> </tr> <tr> <td colspan="6" align="center"> 合計点：<span id="total_1">0</span>点 </td> </tr> </table> </div> <div class= "group2"> <table border="" width="840px" height="700"> <tr><th colspan=6 height="10%">グループⅡ</th></tr> <tr width="16%" height="10%"> <th>A難度</th><th>B難度</th><th>C難度</th><th> D難度</th><th>E難度</th><th>F難度</th> </tr> <tr align="center"> <td> <input type="checkbox" class="G2" value="0.1" id="A1" /><label for="A1">前宙</label> </td> <td> <input type="checkbox" class="G2" value="0.2" id="B1" /><label for="B1">前宙</label> </td> <td> <input type="checkbox" class="G2" value="0.3" id="C1" /><label for="C1">前宙</label> </td> <td> <input type="checkbox" class="G2" value="0.4" id="D1" /><label for="D1">前宙</label> </td> <td> <input type="checkbox" class="G2" value="0.5" id="E1" /><label for="E1">前宙</label> </td> <td> <input type="checkbox" class="G2" value="0.6" id="F1" /><label for="F1">前宙</label> </td> </tr> <tr> <td colspan="6" align="center"> 合計点：<span id="total_2">0</span>点 </td> </tr> </table> </div> <div class= "group3"> <table border="" width="840px" height="700"> <tr><th colspan=6 height="10%">グループⅢ</th></tr> <tr width="16%" height="10%"> <th>A難度</th><th>B難度</th><th>C難度</th><th> D難度</th><th>E難度</th><th>F難度</th> </tr> <tr align="center"> <td> <input type="checkbox" class="G3" value="0.1" id="A1" /><label for="A1">前宙</label> </td> <td> <input type="checkbox" class="G3" value="0.2" id="B1" /><label for="B1">前宙</label> </td> <td> <input type="checkbox" class="G3" value="0.3" id="C1" /><label for="C1">前宙</label> </td> <td> <input type="checkbox" class="G3" value="0.4" id="D1" /><label for="D1">前宙</label> </td> <td> <input type="checkbox" class="G3" value="0.5" id="E1" /><label for="E1">前宙</label> </td> <td> <input type="checkbox" class="G3" value="0.6" id="F1" /><label for="F1">前宙</label> </td> </tr> <tr> <td colspan="6" align="center"> 合計点：<span id="total_3">0</span>点 </td> </tr> </table> </div> <script="script.js"></script> </body> </html> ```ここに言語を入力 コード
確認、デバッグの仕方をまとめた回答もしていますので参考にしてください。
https://teratail.com/questions/192321#reply-285336
<script="script.js"></script>
なんですか、これ
width="840px" height="700"
pxはいらないので修正をお願いします。
回答1件
ベストアンサー
あなたの回答
tips
プレビュー
