選択フィールドの2つのグループの合計を個別に計算する

Question

JavaScriptで選択フィールド1〜8と9〜16の合計を取得したいとします。どうやってやるの？それはどのように行うことができるか

//sum 
 
<select name="formselect1" style="position:absolute;left:279px;top:235px;width:103px;z-index:2"> 
 
<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"> 
 
<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"> 
 
<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"> 
 
<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"> 
 
<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"> 
 
<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"> 
 
<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"> 
 
<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" /> 
 
<select name="formselect9" style="position:absolute;left:384px;top:234px;width:103px;z-index:10"> 
 
<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"> 
 
<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"> 
 
<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"> 
 
<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"> 
 
<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"> 
 
<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"> 
 
<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"> 
 
<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" />

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>