KeisukeYamazaki
4/12/2020 - 2:03 PM

入力された点数を自動的に計算して表示する

入力された点数を自動的に計算して表示する

    // 個人登録の際に科目の合計を表示するメソッド
    // $(document) とすると、追加された行の要素もイベントの対象として認識される
    $(document).on('input', '.personal', function () {
        let subjects_five = ['english', 'math', 'japanese', 'science', 'social_studies'];
        let not_five_subjects = ['music', 'art', 'pe', 'tech_home'];
        // 入力したテキストボックスのname(=subject)を取得
        let subject = $(this).attr('name');
        // index でクリックした科目が何番目かを取得する
        let index = $('input[name="' + subject + '"]').index(this);
        let sum_five = 0;
        // 5科目でループを回し、合計点を算出する
        for (let i = 0; i < subjects_five.length; i++) {
            if (parseInt($('input[name=' + [subjects_five[i]] + ']').eq(index).val(), 10)) {
                // parseIntできれば、sum_fiveに加える
                sum_five = sum_five + parseInt($('input[name=' + [subjects_five[i]] + ']').eq(index).val(), 10);
            }
        }
        // 9科目の場合も同様に合計点を算出
        let sum_all = sum_five;
        for (let i = 0; i < not_five_subjects.length; i++) {
            if (parseInt($('input[name=' + [not_five_subjects[i]] + ']').eq(index).val(), 10)) {
                sum_all = sum_all + parseInt($('input[name=' + [not_five_subjects[i]] + ']').eq(index).val(), 10);
            }
        }
        // 模試用の3科目(5科目の配列を使い、3回ループを回す)
        let sum_three = 0;
        for (let i = 0; i < 3; i++) {
            if (parseInt($('input[name=' + [subjects_five[i]] + ']').eq(index).val(), 10)) {
                sum_three = sum_three + parseInt($('input[name=' + [subjects_five[i]] + ']').eq(index).val(), 10);
            }
        }
        // valueとtextに合計をセットする
        $('input[name="sum_five"]').eq(index).attr('value', sum_five);
        $('.sum_five').eq(index).text(sum_five);
        $('input[name="sum_all"]').eq(index).attr('value', sum_all);
        $('.sum_all').eq(index).text(sum_all);
        $('input[name="sum_three"]').eq(index).attr('value', sum_three);
        $('.sum_three').eq(index).text(sum_three);
    });