複数の計算式があります。
それぞれ、ホームページで数値を入れていって、最後に計算ボタンを押すと、計算した値が一気に出るようにしたいです。
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を足す」
という計算式を追加して、でも「計算」ボタンは一個のままで済ませるには、どうすればいいでしょうか。
もしできれば、全体のスクリプトをお教えいただけるととてもありがたいです。
よろしくお願い致します。
No.2ベストアンサー
- 回答日時:
ちょっと文意が読み取れていないかもしれないんですが
これでどうでしょうか?
<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と定義しているところがあったんですね。)
ただ、(すんなりうまくいきかけているのでついつい欲が出てしまっているのですが、)小数点が出る範囲を下一桁までに固定する、なんてことは可能でしょうか。
No.4
- 回答日時:
すいません。
No.3の参考URLは、本件の参考としては適当ではなかったようです。
あれからネットでちょっと探してみたんですが
適当なソースがみつからなかったので、自分で作ってみました。
No.2のソースにdecimalAlignという関数を追加しています。
この関数は、decimalAlign([数値],[小数点以下桁数])という形で実行すると、小数点以下の桁数を揃えた文字列を返します。
つまり
「f.z.value = decimalAlign(z, 2);」
と記述すると「z」の値を小数点以下2桁に整形した文字列を返して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のほうもページに反映させて頂きます。
本当にありがとうございました。
No.3
- 回答日時:
小数点以下の桁数を揃える方法は参考URLが参考になると思いますよ。
一旦文字列として扱って、splitで「.」を境に右と左に分けてから云々。。。という処理になりそうですね。
また、計算誤差に言及するときにはこちらのURLが参考になると思います。
http://www.geocities.co.jp/SiliconValley/4334/un …
参考URL:http://www.openspc2.org/reibun/javascript/busine …
No.1
- 回答日時:
全体のスクリプトという前に、
「どういう内容の計算をするか」というのをはっきりさせておく必要があると思います。
複数の計算式を行うことはもちろん可能なのですが、
それには、解答を入力する欄がさらにもう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を足すにはどうすればいいでしょう。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript HTMLでJavaScriptを使ってパスワードの強化判定のプログラムを作成しています。 一通り作っ 2 2022/10/19 01:41
- PHP PHPで画像の渡しが上手く行きません。 1 2023/02/02 09:39
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
C言語クイックソートの比較総回...
-
クリックの度に加算していくには?
-
ユーザーフォームでの検索結果...
-
表示したレイヤー以外をクリッ...
-
[Javascript]TEXTAREAで改行さ...
-
ASPでフォームのプルダウンの値...
-
selectboxのoptionタグのvalue...
-
Jqueryを使って値の合計を簡単...
-
hiddenのvalueの値を変えたい
-
クイズ作成:15個の問題から5個...
-
VBAをJavaScriptに変換したいです
-
テキストボックスに入力された...
-
name属性が同じフォームが複数...
-
javascriptで複数の計算を同時...
-
visual sutudio2012でのコード...
-
HTML ローカルストレージへの保存
-
JavaScriptのfileオブジェクト...
-
カレンダーに印を付けたい
-
ラジオボタンで選択した項目の...
-
ラジオボタンの選択でチェック...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
value内に変数を入れたい
-
hiddenのvalueの値を変えたい
-
3桁区切りのカンマをつけたい...
-
VB.NET DateTimeの型について
-
複数のsubmitボタンで押された...
-
テキストボックスに入力された...
-
フォーム内容を上から順番にJav...
-
VBAをJavaScriptに変換したいです
-
javascriptでhiddenに二次元配...
-
大量のselect要素のvalueを短い...
-
フォームで入力した値を別のフ...
-
プルダウン選択時、既に入力済...
-
ラジオボタンと連動して文字列...
-
引数に数値、文字列の混在
-
クイズ作成:15個の問題から5個...
-
クリックの度に加算していくには?
-
setIntervalの間隔を途中で変更...
-
Pythonで会員サイトの自動ログ...
-
selectboxのoptionタグのvalue...
-
JavaScriptによる自動計算フォ...
おすすめ情報