从多个函数中加总和

Question

我有5个表格。每个表单都有一组单选按钮。是= 1否= 0。在这些表格的底部，它输出选择的总和。我有这一切都很好。但是我需要一个输入框，在这5个表单下面显示总和来自这些表单及其功能的总和。无线电代码的样本是：

<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>

我也发布了我的功能代码。现在我需要帮助在组合总输入中获得这些总值

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;
}

Answer 1

首先，使用函数而不是复制和粘贴相同的代码20次：

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;
}

然后你可以使用这个功能：

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

这将使您的代码更易于管理。

您的每个DisplaySum函数都应返回其结果。也许他们不应该只是显示而只是计算它。

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);
}

Answer 2

你只需要这些函数中的每一个都能返回一些东西，并将它们全部添加起来。

我的建议是分担计算这些总和的责任，并点击正在改变dom值的处理程序。

假设您的显示总和正常工作，更改它们的结尾以返回总和。并使用单独的函数来操作dom。

所以这个

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;
}

成为两个功能

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;
}

最后你的html更改为

<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>

所以现在，要获得所有这些的总和 你可以打电话

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

还有一些我也建议的重构，比如重用代码，正确（小写）命名函数等，但不需要解决当前问题