セレクターを使った単位変換

呼び名はセレクター、セレクトボックス、チョイス、プルダウンメニューと色々あるようです。
やりたいことは簡単で、元になる単位を違うものに変えたら幾つになるかを表示するだけです。

プログラムの要素

テキスト・フィールドが2つとセレクターがテーブルの中に配置されています。

<FORM name="frm">

<TABLE border="1" cellpadding="6" cellspacing="1">
  <TBODY>
    <TR>
      <TD bgcolor="#f0ffff"><INPUT size="20" type="text" name="txtA" onChange="calcA()" value="1"></TD>
      <TD bgcolor="#f0ffff"> 
      <SELECT name="cmbA" onChange="calcA()">
<OPTION value="1">メートル(m)</OPTION>
<OPTION value="1000">キロメートル(km)</OPTION>
<OPTION value="0.01">センチメートル(cm)</OPTION>
<OPTION value="0.001">ミリ(mm)</OPTION>
<OPTION value="0.0254">インチ(in)</OPTION>
<OPTION value="0.3048">フィート(ft)</OPTION>
<OPTION value="0.9144">ヤード(yd)</OPTION>
<OPTION value="1609.3440">マイル</OPTION>
<OPTION value="0.30303">尺(シャク)</OPTION>
      </SELECT></TD>

    </TR>
    <TR>
      <TD bgcolor="#fff0f0"><INPUT size="20" type="text" name="txtB"></TD>
      <TD bgcolor="#fff0f0">
      <SELECT name="cmbB" onChange="calcA()">
<OPTION value="1">メートル(m)</OPTION>
<OPTION value="1000">キロメートル(km)</OPTION>
<OPTION value="0.01">センチメートル(cm)</OPTION>
<OPTION value="0.001">ミリ(mm)</OPTION>
<OPTION value="0.0254">インチ(in)</OPTION>
<OPTION value="0.3048">フィート(ft)</OPTION>
<OPTION value="0.9144">ヤード(yd)</OPTION>
<OPTION value="1609.3440">マイル</OPTION>
<OPTION value="0.30303">尺(シャク)</OPTION>
      </SELECT></TD>

    </TR>
  </TBODY>
</TABLE>

</FORM>

テキスト・フィールドの使い方は、1つ目の値を収得して(frm.txtA.value)、文字列を数字に変換して(parseFloat)、計算結果を2つ目のテキスト・フィールド(frm.txtB.value)に戻します。
テキストフィールドから値を持ってきた時には、文字列型であることには注意が必要です。

2つのセレクターは、nameがcmbAとcmbBと違うだけで後は一緒です。
プルダウンした時にどのようなアイテムが表示されるかは、<OPTION>タグで指定します。
幾つでも継ぎ足す事ができます。

どちらのセレクターも選択しているものが変更になると(onChange)、calcA()関数が呼ばれます。

<SCRIPT language="JavaScript"><!--

function calcA(){
  var frm  = document.frm;
  var Am2  = frm.cmbA.value;
  var Bm2  = frm.cmbB.value;
  var Av   = parseFloat(frm.txtA.value);//値はテキストなのでFloatへ変換
  var Avm2 = Av * Am2;
  var Bv   = Avm2 / Bm2;
  frm.txtB.value = Bv;
}

--></SCRIPT>

frm.cmbA.valueでは現在選択されているセレクターの値(value)が返されます。
1mを１とした時の各単位の係数を得る事ができます。
そのAの係数とテキストフィールド1の（ parseFloatされた）値をかけて、Bの係数で割った値をテキストフィールドのBに戻します。

しかし、最初の1つ目に”長さ”のようにセレクターの属性を表示したい場合があります。
(都道府県を1つ目にして、北海道から順番にリストする時など）

表示を初期化（1つ目を表示）したい時などはインデックス番号で扱った方が便利な時もあります。

課題

1つ目のセレクターで、化学で扱う単位を選択する。
例えば、長さ、重さ、圧力、温度、体積・・・・

それが指定された時に、ダイナミックに2番目、3番目のセレクターの中身を入れ替えてテキスト・フィールドの値を自由に変換するする事ができるように改造してください。

つまり、セレクターの中身をフォームで固定するのではなく、JavaScriptで書き換える方法を考えてください。

ダイナミックなセレクター中身の設定

化学系プログラミング > Javascript化学系演習 > セレクターを使った単位変換

単位換算プログラム

セレクターの使い方

プログラムの要素

課題

ダイナミックなセレクター中身の設定