アプリ版：「スタンプのみでお礼する」機能のリリースについて

ホームページ上での計算について（JavaScript）

解決済

  • 質問者：noname#50162
  • 質問日時：
  • 回答数：4件

複数の計算式があります。
それぞれ、ホームページで数値を入れていって、最後に計算ボタンを押すと、計算した値が一気に出るようにしたいです。
CGIではなく、HTMLの中にJavaScriptを埋め込んで作りたいと思っています。

スクリプトの意味はよくわからないまま、とりあえず以下のソースを埋め込んでみました。

HEAD部分に

<SCRIPT LANGUAGE="JavaScript">
function calc(f){
f.z.value=eval(f.x.value)+eval(f.y.value);
}
</SCRIPT>

BODY部分に

<FORM NAME="form1">
<INPUT TYPE="text" SIZE=10 NAME="x">+
<INPUT TYPE="text" SIZE=10 NAME="y">=
<INPUT TYPE="text" SIZE=10 NAME="z"><BR>
<INPUT TYPE="button" VALUE="計算" onClick="calc(this.form)"><BR>
</FORM>

これは動きました。
でも、計算式が一つだけです。複数の式を計算させたいのですが……。
同じ感じでコピーしてxyzの文字をかえたりと幼稚な試行錯誤をしてみましたが動きませんでした。
二つ以上の計算式を埋め込むには、どんなスクリプトにすればいいのでしょうか。
たとえば、
「別の空欄に入れたaという値とbという値をかけて、先ほどのxという値を2倍したものを引き、さらに100を足す」
という計算式を追加して、でも「計算」ボタンは一個のままで済ませるには、どうすればいいでしょうか。
もしできれば、全体のスクリプトをお教えいただけるととてもありがたいです。
よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.2ベストアンサー

  • 回答者： dayowl
  • 回答日時：

ちょっと文意が読み取れていないかもしれないんですが


これでどうでしょうか？

<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です。

この回答への補足

うわー！感動です！！
計算式が10以上あるので、いただいたスクリプトをよいせよいせと改変し（というか部分的に増殖させ）て試行錯誤中ですが、今のところ、とてもうまくいっています。（そうかぁっ、f=this.formと定義しているところがあったんですね。）

ただ、（すんなりうまくいきかけているのでついつい欲が出てしまっているのですが、）小数点が出る範囲を下一桁までに固定する、なんてことは可能でしょうか。

補足日時：2004/07/09 03:30
通報する
    • good
    • 1
    • 件
通報する

No.4

  • 回答者： dayowl
  • 回答日時：

すいません。


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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

#2のスクリプトを使って、無事にページが出来ました！
小数点は難しかったのでゆっくりやろうと思い、とりあえずお礼を書き込もうと開いて#4を見つけてびっくりしました。感謝でいっぱいです。
今日、#4のほうもページに反映させて頂きます。
本当にありがとうございました。

通報する
お礼日時：2004/07/13 05:54

No.3

  • 回答者： dayowl
  • 回答日時：

小数点以下の桁数を揃える方法は参考URLが参考になると思いますよ。


一旦文字列として扱って、splitで「.」を境に右と左に分けてから云々。。。という処理になりそうですね。

また、計算誤差に言及するときにはこちらのURLが参考になると思います。
http://www.geocities.co.jp/SiliconValley/4334/un …

参考URL：http://www.openspc2.org/reibun/javascript/busine …
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： the845t
  • 回答日時：

全体のスクリプトという前に、


「どういう内容の計算をするか」というのをはっきりさせておく必要があると思います。

複数の計算式を行うことはもちろん可能なのですが、
それには、解答を入力する欄がさらにもう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を足すにはどうすればいいでしょう。

補足日時：2004/07/08 16:45
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報