JavaScriptによるプログラミング入門
制作・著作: 生物工学科 星 岳彦
オンライン版編集：生物工学科 佐藤 大輔・篠田 績
11.結果をテキストボックスに表示する
ボタンで計算できるようになったが、結果が表示されてしまうとボタンが消えてしまうのが気持ち悪い。そこで、結果も、専用に作成した窓(テキストボックス)に表示させるようにする。
[作業手順]
(1)次のプログラムをcalc5.htmとして入力し、NetscapeNavigatorで実行してみよ。
<HTML>
<HEAD>
<TITLE>JavaScript calc5</TITLE>
<SCRIPT LANGUAGE="JavaScript">
/* ボタンを押すと、テキストボックスに答えが表示されるようにした。 */
function root(f,n) {
f.value=Math.sqrt(n) ;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Answer: <INPUT NAME="answer" TYPE="TEXT" SIZE=20><BR>
<INPUT TYPE="BUTTON" VALUE="ROOT(2)" onClick="root(this.form.answer,2)">
<INPUT TYPE="BUTTON" VALUE="ROOT(3)" onClick="root(this.form.answer,3)">
<INPUT TYPE="BUTTON" VALUE="ROOT(4)" onClick="root(this.form.answer,4)">
</FORM>
</BODY>
</HTML>
結果を表示するテキストボックスは、answerという名前にした。TYPEをTEXTにすると、テキストボックスになる。SIZEは、テキストボックスの文字数(大きさ)をあらわす。ここでは、20文字まで表示できる大きさにした。
また、結果を表示するときに、テキストボックスのある<FORM>をプログラムが知らないと表示できないので、関数rootに、<FORM>を知らせるためのfという引数を付け加えた。ボタンを押した時点で、このフォームであることを示す、this.form.answerという文字を渡すことによって、それをプログラムに知らせている。
(2)結果
| ←戻る | 目 次 | 進む→ |
|---|
Copyright (c) 1997 Takehiko Hoshi