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

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

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

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

 方法1は IE でのみOK。

... 3個の数値の和 ...
●方法1
  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

●方法2
  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

●方法3
  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


より般的なuv色度図(JavaScript版)
ホーム