Adding up sum from multiple functions

Question

I have 5 forms. Each form has a set of radio buttons. Yes =1 no =0. At the bottom of these forms it outputs the sum of the selections. I have this all working just fine. However I need an input box that shows below these 5 forms that totals the sum from each of these forms and their functions. A sample of the radio code is:

<input type="radio" name="repeat2" value="1" onclick="DisplaySum5(this.value);"> <label>Yes</label>
<input type="radio" name="repeat2" value="0" onclick="DisplaySum5(this.value);"> <label>No</label>

I also am posting the code I have for the functions. Now I need help getting these total values in the Combined total input

function DisplaySum(sum) {
    var val1 = 0;
    for (i = 0; i < document.buildForm.build.length; i++) {
        if (document.buildForm.build[i].checked == true) {
            val1 = document.buildForm.build[i].value;
        }
    }

    var val2 = 0;
    for (i = 0; i < document.buildForm.build2.length; i++) {
        if (document.buildForm.build2[i].checked == true) {
            val2 = document.buildForm.build2[i].value;
        }
    }

    var val3 = 0;
    for (i = 0; i < document.buildForm.build3.length; i++) {
        if (document.buildForm.build3[i].checked == true) {
            val3 = document.buildForm.build3[i].value;
        }
    }

    var val4 = 0;
    for (i = 0; i < document.buildForm.build4.length; i++) {
        if (document.buildForm.build4[i].checked == true) {
            val4 = document.buildForm.build4[i].value;
        }
    }

    var val5 = 0;
    for (i = 0; i < document.buildForm.build5.length; i++) {
        if (document.buildForm.build5[i].checked == true) {
            val5 = document.buildForm.build5[i].value;
        }
    }

    var sum = parseInt(val1) + parseInt(val2) + parseInt(val3) + parseInt(val4) + parseInt(val5);
    document.getElementById('totalSum').value = sum;
}

function DisplaySum2(sum) {
    var val1 = 0;
    for (i = 0; i < document.attractForm.attract.length; i++) {
        if (document.attractForm.attract[i].checked == true) {
            val1 = document.attractForm.attract[i].value;
        }
    }

    var val2 = 0;
    for (i = 0; i < document.attractForm.attract2.length; i++) {
        if (document.attractForm.attract2[i].checked == true) {
            val2 = document.attractForm.attract2[i].value;
        }
    }

    var val3 = 0;
    for (i = 0; i < document.attractForm.attract3.length; i++) {
        if (document.attractForm.attract3[i].checked == true) {
            val3 = document.attractForm.attract3[i].value;
        }
    }

    var val4 = 0;
    for (i = 0; i < document.attractForm.attract4.length; i++) {
        if (document.attractForm.attract4[i].checked == true) {
            val4 = document.attractForm.attract4[i].value;
        }
    }

    var val5 = 0;
    for (i = 0; i < document.attractForm.attract5.length; i++) {
        if (document.attractForm.attract5[i].checked == true) {
            val5 = document.attractForm.attract5[i].value;
        }
    }

    var sum = parseInt(val1) + parseInt(val2) + parseInt(val3) + parseInt(val4) + parseInt(val5);
    document.getElementById('totalSum2').value = sum;
}

function DisplaySum3(sum) {
    var val1 = 0;
    for (i = 0; i < document.convertForm.convert.length; i++) {
        if (document.convertForm.convert[i].checked == true) {
            val1 = document.convertForm.convert[i].value;
        }
    }

    var val2 = 0;
    for (i = 0; i < document.convertForm.convert2.length; i++) {
        if (document.convertForm.convert2[i].checked == true) {
            val2 = document.convertForm.convert2[i].value;
        }
    }

    var val3 = 0;
    for (i = 0; i < document.convertForm.convert3.length; i++) {
        if (document.convertForm.convert3[i].checked == true) {
            val3 = document.convertForm.convert3[i].value;
        }
    }

    var val4 = 0;
    for (i = 0; i < document.convertForm.convert4.length; i++) {
        if (document.convertForm.convert4[i].checked == true) {
            val4 = document.convertForm.convert4[i].value;
        }
    }

    var sum = parseInt(val1) + parseInt(val2) + parseInt(val3) + parseInt(val4);
    document.getElementById('totalSum3').value = sum;
}

function DisplaySum4(sum) {
    var val1 = 0;
    for (i = 0; i < document.closeForm.close.length; i++) {
        if (document.closeForm.close[i].checked == true) {
            val1 = document.closeForm.close[i].value;
        }
    }

    var val2 = 0;
    for (i = 0; i < document.closeForm.close2.length; i++) {
        if (document.closeForm.close2[i].checked == true) {
            val2 = document.closeForm.close2[i].value;
        }
    }

    var val3 = 0;
    for (i = 0; i < document.closeForm.close3.length; i++) {
        if (document.closeForm.close3[i].checked == true) {
            val3 = document.closeForm.close3[i].value;
        }
    }

    var val4 = 0;
    for (i = 0; i < document.closeForm.close4.length; i++) {
        if (document.closeForm.close4[i].checked == true) {
            val4 = document.closeForm.close4[i].value;
        }
    }

    var sum = parseInt(val1) + parseInt(val2) + parseInt(val3) + parseInt(val4);
    document.getElementById('totalSum4').value = sum;
}

function DisplaySum5(sum) {
    var val1 = 0;
    for (i = 0; i < document.repeatForm.repeat.length; i++) {
        if (document.repeatForm.repeat[i].checked == true) {
            val1 = document.repeatForm.repeat[i].value;
        }
    }

    var val2 = 0;
    for (i = 0; i < document.repeatForm.repeat2.length; i++) {
        if (document.repeatForm.repeat2[i].checked == true) {
            val2 = document.repeatForm.repeat2[i].value;
        }
    }

    var sum = parseInt(val1) + parseInt(val2);
    document.getElementById('totalSum5').value = sum;
}

You should probably id or class those inputs. – Onilol Sep 17 '15 at 19:08 — Onilol, Sep 17 '15 at 19:08

score 0 · Answer 1 · answered Sep 17 '15 at 19:10

To begin with, use functions instead of copying and pasting the same code 20 times:

function retrieveValue(elements) {
    var result = 0;
    for( var i = 0; i < elements.length; i++ ) {
        if( elements[i].checked === true ) {
            result = elements[i].value;
        }
    }
    return result;
}

Then you can use this function:

function DisplaySum() {
    var val1 = retrieveValue( document.buildForm.build );
    var val2 = retrieveValue( document.buildForm.build2 );
    // etc
}

This will make your code much more manageable.

Each of your DisplaySum functions should return their result. Perhaps they shouldn't even display but just calculate it.

function calculateSum1() {
    var val1 = retrieveValue( document.buildForm.build );
    var val2 = retrieveValue( document.buildForm.build2 );
    // ...
    var sum = parseInt(val1) + parseInt(val2) + ...;
    return sum;
}

function DisplaySum() {
    var sum1 = calculateSum1();
    var sum2 = calculateSum2();
    var sum3 = calculateSum3();
    var sum4 = calculateSum4();
    var sum5 = calculateSum5();

    document.getElementById('totalSum1').value = sum1;
    document.getElementById('totalSum2').value = sum2;
    document.getElementById('totalSum3').value = sum3;
    document.getElementById('totalSum4').value = sum4;
    document.getElementById('totalSum5').value = sum5;

    var total = sum1 + sum2 + sum3 + sum4 + sum5;
    console.log("The total is", total);
}

I need the result to display in the total input field for each form used. Then I need the total of those 5 sub-totals in the last input field in the final form. Adding a calculate button might even work if I had too — user2278240, Sep 17 '15 at 22:11
You can do that: `document.getElementById('last input field in final form').value = total;` (of course change the id in this snippet to be the actual id of the element) — dsh, Sep 18 '15 at 12:34
Same question here: If I do it this way and have the total displayed in each input field at the end of each form. How do I call this last total in the final span id? — user2278240, Sep 18 '15 at 15:11
[Set content of span using Javascript](http://stackoverflow.com/a/4784796/1172714) — dsh, Sep 18 '15 at 15:57

score 0 · Answer 2 · answered Sep 17 '15 at 19:10

You just need each of these functions to return something, and add them all up.

my suggestion would be to split the responsibility of calculating these sums, and onclick handlers that are changing the value of the dom.

assuming your display sums all work properly, change the ending of them to return a sum. and use a separate function to manipulate the dom.

so this

function DisplaySum5(sum) {
    var val1 = 0;
    for (i = 0; i < document.repeatForm.repeat.length; i++) {
        if (document.repeatForm.repeat[i].checked == true) {
            val1 = document.repeatForm.repeat[i].value;
        }
    }

    var val2 = 0;
    for (i = 0; i < document.repeatForm.repeat2.length; i++) {
        if (document.repeatForm.repeat2[i].checked == true) {
            val2 = document.repeatForm.repeat2[i].value;
        }
    }

    var sum = parseInt(val1) + parseInt(val2);
    document.getElementById('totalSum5').value = sum;
}

becomes two functions

function CalcSum5() {
    var val1 = 0;
    for (i = 0; i < document.repeatForm.repeat.length; i++) {
        if (document.repeatForm.repeat[i].checked == true) {
            val1 = document.repeatForm.repeat[i].value;
        }
    }

    var val2 = 0;
    for (i = 0; i < document.repeatForm.repeat2.length; i++) {
        if (document.repeatForm.repeat2[i].checked == true) {
            val2 = document.repeatForm.repeat2[i].value;
        }
    }

    var sum = parseInt(val1) + parseInt(val2);
    return sum;
}

function HandleSum5(){
    var sum = CalcSum5();
    document.getElementById('totalSum5').value = sum;
}

and lastly your html changes to this

<input type="radio" name="repeat2" value="1" onclick="HandleSum5(this.value);"> <label>Yes</label>
<input type="radio" name="repeat2" value="0" onclick="HandleSum5(this.value);"> <label>No</label>

so now, to get the sum of all of them you can call

var totalSum = CalcSum1() + CalcSum2() ...

theres a handful of refactors i'd suggest too, such as reusing code, proper (lowercase) naming of functions etc, but unneeded to solve your current issue

I am fairly limited when it comes to js and php stuff. So would that totalSum be a new function? That I would call? For example: — user2278240, Sep 17 '15 at 19:59
function TotalSum(){ var totalSum = CalcSum() + CalcSum2() + CalcSum3() + CalcSum4() + CalcSum5(); return totalSum; } — user2278240, Sep 17 '15 at 20:48
I tried doing this and it isnt display a total in the main score input — user2278240, Sep 17 '15 at 20:59
In this answer, `totalSum` is a Number, not a function. You also need to think about _when_ you want that to be calculated. You want it to be calculated when any of the inputs that affect the sum is changed, not when the user changes the 'totalScore' input element. (which should be a span element to display data, not an input element) — dsh, Sep 18 '15 at 12:34
would it be like so? $(document).ready(function() { $(\'#totalScore\').ready(function(){ var totalSum = CalcSum() + CalcSum2() + CalcSum3() + CalcSum4() + CalcSum5(); return totalSum; }); }); — user2278240, Sep 18 '15 at 15:25

Adding up sum from multiple functions

2 Answers2