Question

我希望在JavaScript中获得选择字段1到8和9到16的总和。我怎么能这样做？

/page

Answer 1

这是怎么做到的。计算负荷总和，然后每次任何一个方框改变。

    <form>

        //sum
        <select name="formselect1" style="position:absolute;left:279px;top:235px;width:103px;z-index:2" onchange="calcSum1();">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        </select>
        <select name="formselect2" style="position:absolute;left:279px;top:259px;width:103px;z-index:3" onchange="calcSum1();">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        </select>
        <select name="formselect3" style="position:absolute;left:279px;top:283px;width:103px;z-index:4" onchange="calcSum1();">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        </select>
        <select name="formselect4" style="position:absolute;left:279px;top:307px;width:103px;z-index:5" onchange="calcSum1();">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        </select>
        <select name="formselect5" style="position:absolute;left:279px;top:331px;width:103px;z-index:6" onchange="calcSum1();">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        </select>
        <select name="formselect6" style="position:absolute;left:279px;top:355px;width:103px;z-index:7" onchange="calcSum1();">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        </select>
        <select name="formselect7" style="position:absolute;left:279px;top:379px;width:103px;z-index:8" onchange="calcSum1();">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        </select>
        <select name="formselect8" style="position:absolute;left:279px;top:402px;width:103px;z-index:9" onchange="calcSum1();">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        </select>
        <input type="text" name="sum1" id="sum1" value="0" />
        <select name="formselect9" style="position:absolute;left:384px;top:234px;width:103px;z-index:10" onchange="calcSum2();">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        </select>
        <select name="formselect10" style="position:absolute;left:384px;top:258px;width:103px;z-index:11" onchange="calcSum2();">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        </select>
        <select name="formselect11" style="position:absolute;left:384px;top:282px;width:103px;z-index:12" onchange="calcSum2();">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        </select>
        <select name="formselect12" style="position:absolute;left:384px;top:306px;width:103px;z-index:13" onchange="calcSum2();">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        </select>
        <select name="formselect13" style="position:absolute;left:384px;top:330px;width:103px;z-index:14" onchange="calcSum2();">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        </select>
        <select name="formselect14" style="position:absolute;left:384px;top:354px;width:103px;z-index:15" onchange="calcSum2();">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        </select>
        <select name="formselect15" style="position:absolute;left:384px;top:378px;width:103px;z-index:16" onchange="calcSum2();">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        </select>
        <select name="formselect16" style="position:absolute;left:385px;top:402px;width:103px;z-index:17" onchange="calcSum2();">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        </select>
        <input type="text" name="sum2" id="sum2" value="0" />            

    </form>



        <script>
            var sum1 = document.getElementById("sum1").value;
            function calcSum1(){
                sum1  = 0;
                var boxVal = 0;
                for(var i=0; i<8; i++) {
                    boxVal = parseInt(document.forms[0].elements[i].value);
                    sum1 += boxVal;
                }

                document.getElementById("sum1").value = sum1;
            }

            var sum1 = document.getElementById("sum2").value;

            function calcSum2(){
                var boxVal = 0;
                sum2  = 0;
                for(var i=9; i<17; i++) {
                    boxVal = parseInt(document.forms[0].elements[i].value);
                    sum2 += boxVal;
                }

                document.getElementById("sum2").value = sum2;
            }

            // initialize the sums 
            calcSum1();
            calcSum2();

        </script>

分别计算两组选择字段的总和

1 个答案: