- ベストアンサー
ホームページ上での計算について（JavaScript）
- ホームページ上での計算について（JavaScript）
- 複数の計算式をホームページ上で実行する方法について説明します。HTMLの中にJavaScriptを埋め込むことで、数値を入力し計算ボタンを押すと結果が表示されます。
- 複数の計算式を実行するために、<FORM>タグの中に必要な数の<INPUT>タグを作成します。各計算式の結果を表示するために、<INPUT>タグには名前を付けます。JavaScriptの関数を作成し、<FORM>タグ内の要素を取り扱います。
- mizuarai
- お礼率68% (64/94)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ちょっと文意が読み取れていないかもしれないんですが これでどうでしょうか？ <html> <head><title></title> <script language="javascript"> <!--// function calc(f){ x = Number(f.x.value); y = Number(f.y.value); z = x + y; f.z.value = z; a = Number(f.a.value); b = Number(f.b.value); c = a * b - x * 2 + 100; f.c.value = c; } //--> </script> </head> <body> <FORM NAME="form1"> a = <INPUT TYPE="text" SIZE=10 NAME="a"><br> b = <INPUT TYPE="text" SIZE=10 NAME="b"><br> x = <INPUT TYPE="text" SIZE=10 NAME="x"><br> y = <INPUT TYPE="text" SIZE=10 NAME="y"><br> <INPUT TYPE="button" VALUE="計算" onClick="calc(this.form)"><BR> <hr> z = x + y<br> z = <INPUT TYPE="text" SIZE=10 NAME="z"><BR> c = a * b - x * 2 + 100<br> c = <INPUT TYPE="text" SIZE=10 NAME="c"><br> </FORM> </body> </html> >このfとかいうのの意味もよくわからなかったんですが… 端的に言うと「f」というのは「this.form」のことです。 （つまりform1のことです） calcを呼び出す側では「onClick="calc(this.form)"」というふうに、calcの引数に「this.form」を指定していますね。 それからcalc関数の定義では、「function calc(f)」と書いています。 そのため、calc関数の内部では、「this.form」を「f」という記号で表現しても良いことになっています。 つまり、 「function calc(fff)」と記述すれば、 「fff.z.value」と書けるわけです。 もちろん <FORM NAME="form1">のNAMEパラメータで指定したものを使って 「form1.z.value」でもOKです。
その他の回答 (3)
- dayowl
- ベストアンサー率56% (84/148)
すいません。 No.3の参考URLは、本件の参考としては適当ではなかったようです。 あれからネットでちょっと探してみたんですが 適当なソースがみつからなかったので、自分で作ってみました。 No.2のソースにdecimalAlignという関数を追加しています。 この関数は、decimalAlign([数値],[小数点以下桁数])という形で実行すると、小数点以下の桁数を揃えた文字列を返します。 つまり 「f.z.value = decimalAlign(z, 2);」 と記述すると「z」の値を小数点以下２桁に整形した文字列を返してf.z.valueにセットすることができます。 <html> <head><title></title> <script language="javascript"> <!--// function calc(f){ x = Number(f.x.value); y = Number(f.y.value); z = x + y; f.z.value = decimalAlign(z, 2); a = Number(f.a.value); b = Number(f.b.value); c = a * b - x * 2 + 100; f.c.value = decimalAlign(c, 2); } function decimalAlign(num, decimal) { decimalChar = ""; alignNumber = Math.pow(10, decimal); result = Math.round(num * alignNumber) / alignNumber; result_str = String(result); for (i = 1; i <= decimal; i++) { decimalChar += "0"; } if (result_str.indexOf(".") != -1) { a = result_str.split(".")[0]; b = result_str.split(".")[1] + decimalChar; result_str = a + "." + b.substring(0, decimal); } else { a = result_str.split(".")[0]; if (decimal != 0) { result_str = a + "." + decimalChar; } else { result_str = a; } } return(result_str); } //--> </script> </head> <body> <FORM NAME="form1"> a = <INPUT TYPE="text" SIZE=10 NAME="a"><br> b = <INPUT TYPE="text" SIZE=10 NAME="b"><br> x = <INPUT TYPE="text" SIZE=10 NAME="x"><br> y = <INPUT TYPE="text" SIZE=10 NAME="y"><br> <INPUT TYPE="button" VALUE="計算" onClick="calc(this.form)"><BR> <hr> z = x + y<br> z = <INPUT TYPE="text" SIZE=10 NAME="z"><BR> c = a * b - x * 2 + 100<br> c = <INPUT TYPE="text" SIZE=10 NAME="c"><br> </FORM> </body> </html>
お礼
#2のスクリプトを使って、無事にページが出来ました！ 小数点は難しかったのでゆっくりやろうと思い、とりあえずお礼を書き込もうと開いて#4を見つけてびっくりしました。感謝でいっぱいです。 今日、#4のほうもページに反映させて頂きます。 本当にありがとうございました。
- dayowl
- ベストアンサー率56% (84/148)
小数点以下の桁数を揃える方法は参考URLが参考になると思いますよ。 一旦文字列として扱って、splitで「.」を境に右と左に分けてから云々。。。という処理になりそうですね。 また、計算誤差に言及するときにはこちらのURLが参考になると思います。 http://www.geocities.co.jp/SiliconValley/4334/unibon/javascript/trimfixed.html
- the845t
- ベストアンサー率33% (246/743)
全体のスクリプトという前に、 「どういう内容の計算をするか」というのをはっきりさせておく必要があると思います。 複数の計算式を行うことはもちろん可能なのですが、 それには、解答を入力する欄がさらにもう1つ必要になります。 あと、aとbという値が任意のものであるなら、そのフォームもまた必要になります。 z2なんていうフォームを用意すれば form1.z2.value = a * b - Number(form1.x.value) * 2 + 100; を追加するだけでいいのではないかと。 ちなみに・・・f.z.valueじゃ動かないでしょ？ form1.z.valueでは？
補足
何故か動いています…。このfとかいうのの意味もよくわからなかったんですが… その手のを試行錯誤で追加してみたんですが、動かなくなるのでご質問しました。 入れる位置とか、前後に他に何が必要かとかがわかりません。 form1.z2.value = a * b - Number(form1.x.value) * 2 + 100; これはHEAD部分に挿入するのかなとは思うのですが、詳細がやっぱりわかりません。 function calc(f){ f.z.value=eval(f.x.value)+eval(f.y.value); } form1.z2.value = a * b - Number(form1.x.value) * 2 + 100; なのか、 function calc(f){ f.z.value=eval(f.x.value)+eval(f.y.value); form1.z2.value = a * b - Number(form1.x.value) * 2 + 100; } function calc(f){ form1.z2.value = a * b - Number(form1.x.value) * 2 + 100; } なのか？ 一応、BODY部分にフォームは新しく作ったはずなのですが……。 ところで、ためしに function calc(f){ f.z.value=eval(f.x.value)+eval(f.y.value); } を function calc(f){ f.z.value=eval(f.x.value)+2; } と書き換えてみると動きませんでした。 一律に2を足すにはどうすればいいでしょう。
補足
うわー！感動です！！ 計算式が10以上あるので、いただいたスクリプトをよいせよいせと改変し（というか部分的に増殖させ）て試行錯誤中ですが、今のところ、とてもうまくいっています。（そうかぁっ、f=this.formと定義しているところがあったんですね。） ただ、（すんなりうまくいきかけているのでついつい欲が出てしまっているのですが、）小数点が出る範囲を下一桁までに固定する、なんてことは可能でしょうか。