■ Formの要素の配列処理　[JavaScript版]

　button や text など、Form を構成する要素の配列についてのメモ。

　browser（Microsoft IE, Edge, Google Chrome）によってうまくいくもの、いかないものがある。

　方法３のように、document.form.elements[i]を使用すると、IE/Edge/Chromeともうまくいく。
　これはform内で宣言されたi番目の要素を示す。

　方法１は IE でのみOK。

---

... 3個の数値の和 ...
●方法１

  html：
   ＜input type="text" size="5" name="num1[0]" value="10"＞
   ＜input type="text" size="5" name="num1[1]" value="20"＞
   ＜input type="text" size="5" name="num1[2]" value="30"＞

  Javascript:
    sum = 0;
    for(var i=0; i<3; i++) {
      sum += parseFloat(document.form1.elements("num1["+i+"]").value);
    }

　数値： 　 　ー＞ 　結果：

　　browserでのtest結果：　IE/OK,　Edge/NG,　Chrome/NG

●方法２

  html：
   ＜input type="text" size="5" name="num2" value="11"＞
   ＜input type="text" size="5" name="num2" value="21"＞
   ＜input type="text" size="5" name="num2" value="31"＞

  Javascript:
    sum = 0;
    for(var i=0; i<3; i++) {
      sum += parseFloat(document.form2.elements("num2["+i+"]").value);
    }

　数値： 　 　ー＞ 　結果：

　　browserでのtest結果：　IE/NG,　Edge/NG,　Chrome/NG

●方法３

  html：
   ＜input type="text" size="5" name="num3" value="12"＞
   ＜input type="text" size="5" name="num3" value="22"＞
   ＜input type="text" size="5" name="num3" value="32"＞

  Javascript:
    sum = 0;
    for(var i=0; i<3; i++) {
      sum += parseFloat(document.form3.elements[i].value);
    }

　数値： 　 　ー＞ 　結果：

　　browserでのtest結果：　IE/OK,　Edge/OK,　Chrome/OK

---