JavaScript 評価の合計を求める方法 - ソフトウェア開発者の日常

データの評価を行うシステムがあります。
評価の観点が複数あります。
ラジオボタンで観点ごとの点数を選び、合計を表示したいという要望があり、JavaScriptで合計を計算するようにしました。

HTMLのコード

HTMLは以下のように、ラジオボタンをクリックされたら、onclickでデータを区別する名前を引数として、JavaScriptを呼び出すようにしました。
合計点はspanタグで囲んだ部分をid指定で書き換えられるようにしました。

<div id="data1">
    データ1の観点1
    <input type="radio" name="rating_item1" value="1" onclick="totalrating('data1')">1
    <input type="radio" name="rating_item1" value="2" onclick="totalrating('data1')">2
    <input type="radio" name="rating_item1" value="3" onclick="totalrating('data1')">3

    データ1の観点2
    <input type="radio" name="rating_item2" value="1" onclick="totalrating('data1')">1
    <input type="radio" name="rating_item2" value="2" onclick="totalrating('data1')">2
    <input type="radio" name="rating_item2" value="3" onclick="totalrating('data1')">3

    Total：<span id="totalratingdata1">0</span>
</div>
<div id="data2">
    データ2の観点1
    <input type="radio" name="rating_item1" value="1" onclick="totalrating('data2')">1
    <input type="radio" name="rating_item1" value="2" onclick="totalrating('data2')">2
    <input type="radio" name="rating_item1" value="3" onclick="totalrating('data2')">3

    データ2の観点2
    <input type="radio" name="rating_item2" value="1" onclick="totalrating('data2')">1
    <input type="radio" name="rating_item2" value="2" onclick="totalrating('data2')">2
    <input type="radio" name="rating_item2" value="3" onclick="totalrating('data2')">3

    Total：<span id="totalratingdata2">0</span>
</div>

JavaScriptをコーディング
Caspar Camille Rubin

JavaScriptのコード

JavaScrpitは呼び出されると、データごとの観点の選択を取得して、isNaNで非数と判定されなければ、選択された点数を加算して、合計として表示するようにしました。
developer.mozilla.org

function totalrating(dataid) {
    var totalrating = 0;
    for (var loop = 1; loop <= 2; loop++) {
        if (!isNaN($("#" + dataid + " input:radio[name='rating_item" + loop + "']:checked").val())) {
            totalrating += parseInt($("#" + dataid + " input:radio[name='rating_item" + loop + "']:checked").val());
        }
    }

    $("#totalrating" + dataid).text(totalrating);
}