■ 棒グラフを表示する

今回は入力ボックスに入力された数字に対応した棒グラフが表示されるJavascriptを作成します。
下記のサンプルの入力ボックスに0〜100までの数字を入力した後、次の項目に進む（[Tab]キーを押してもよい）と右側のグラフが表示されます。

◆ 実行サンプル

【　解　　　　説　】

まず、入力ボックスの内容が変更された時のイベントは「onchange=""」を使用します。
入力ボックスの情報を渡すためには「this」を使用します。
「this」はそれが記述されているオブジェクトの情報をすべて渡しますのでサブルーチン側でさまざまな情報を取得したり設定することができます。

今回、国語の入力ボックス名は「name="kokugo"」としています。
また、それに対する棒グラフの画像名は「name="kokugog"」と、入力ボックスの名前に「g」をつけただけのものにしています。

「this」で送られたオブジェクトをサブルーチン側では「inptxt0」で受け、その名前を「barname = inptxt0.name;」で取得し、その中の値を「barval0 = inptxt0.value;」でそれぞれ取得します。

そして、棒グラフの画像名を「barname+'g'」で取得し、また、棒グラフを表示するセル枠を400ピクセルに設定しているため、表示する棒グラフの長さは入力ボックスの値の4倍「barval0 * 4」をその画像の幅にセットしています。

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「bargraphj.js」というファイル名で保存します。

function bar_dsp(inptxt0){ barname = inptxt0.name; barval0 = inptxt0.value; if ((eval(barval0)<0) || (eval(barval0)>100)){ barval0=0; alert('点数が正しくありません。'); } document.form1[barname+'g'].width = barval0 * 4; }

次に、HEAD句内にJavascriptの呼び出しを次のように記述します。

<script type="text/javascript" src="bargraphj.js"></script>

次に、入力ボックスとグラフ用の画像をひとつのテーブルにセットし、前後を名前を付けた「form」タグで挟みます。
この時、棒グラフの画像名は入力ボックスでつけた名前に「g」を付加した名前とします。

<form name="form1">
<table class="tbl1">
<tr>
<th abbr="教科">教科</th>
<th abbr="点数">点数</th>
<th abbr="点数" style="width: 400px;">グラフ</th>
</tr>
<tr>
<td class="center">国語</td>
<td><input name="kokugo" type="text" size="6" style="ime-mode:inactive" onchange="bar_dsp(this);"></td>
<td><img src="../../images/icon/bar01.gif" name="kokugog" width="1" height="16" alt="グラフ"></td>
</tr>
</table>
</form>