主なGUI部品を使う (5/5)

これらのGUIは、基本的に「最小値から最大値までの範囲内で値を設定し、その値の状況に応じて表示が変化する」という働きをします。ただし、チェックボックスなどと異なり、GUIそのものを表すHTML要素というのは存在しないため、いくつかの部品の組み合わせとしてGUIが作成されています。したがって、JavaScript内からこれらを操作する場合も、チェックボックスのように「GUI用のタグを取り出して操作する」とはいきません。そもそも、そんなものはないのですから。

ではどのようにするのか。これらのGUI部品では、<div>タグ内に表示が構築されているのですが、この<div>タグに「object」というプロパティが用意されており、ここにGUI部品に関する様々な機能や設定をまとめたオブジェクトが保管されています。このobject内にあるものを利用することで、GUIを操作することができます。

例として、ボタンをクリックするごとにゲージの値が増え、表示が変化していくサンプルを考えてみましょう。ここではIDを「gauge」、最小値ゼロ、最大値10としてGUI部品がおかれているものとします。各しきい値はそれぞれ適当に設定しておいてください（ただし、最小値〜最大値の範囲内で）。

また現在の値を表示するのに、「text1」というテキスト部品を、処理を実行するためにプッシュボタンを配置してあるものとします。ボタンには、onclick属性にbutton1Click関数を割り当てておきます。

下のリスト欄に、そのサンプルコードを挙げておきます。ボタンをクリック（タッチ）するごとに値が増えていき、ゲージの色が変化していくのがわかるでしょう。


これらのGUIを扱う場合、注意しなければならないのは「GUIに関する情報は、objectプロパティに設定されているオブジェクトの中にまとめられている」という点です。現在の値を取得するには「value」、また値を変更するには「setValue」を使います。関数の処理を見てみると、以下のようにGUIの値を扱っていることがわかるでしょう。

var n = touch.object.value;
touch.object.setValue(n);

ただし、注意しておきたいのは、「初期値がゼロだと、valueの値が得られないことがある」という点です。valueの値を取り出しても「undefined（未定義を示す特殊な値）」となってしまうのです。これは、ほぼ同じ構造のゲージやレベルインジケータが問題なく値を取得できることから、インジケータのバグかも知れません。念のため、ここではvalueで取り出した値がundefinedの場合は変数nにゼロを代入して対処しています。

この「value」「setValue」による値の操作は、インジケータのみならず、ゲージやレベルインジケータでも全く同様に扱うことができます。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

function button1Click(event)
{
	var touch = document.getElementById("gauge");
	var n = touch.object.value;
	if (n == undefined){ n = 0; }
	n++;
	if (n > touch.object.maxValue){
		n = touch.object.minValue;
	}
	touch.object.setValue(n);
	var text1 = document.getElementById("text1");
	text1.innerHTML = "value:" + n;
}