JavaScriptの計算式を添削してください。

このQ&Aのポイント
  • JavaScriptの計算式に関する添削をお願いします。
  • 250×変数A+200×変数B+150×変数Cの計算式を使用しています。
  • JavaScript初心者ですが、動作は問題ありません。
回答を見る
  • ベストアンサー

JavaScriptの計算式を添削してください。

250×変数A+200×変数B+150×変数C=合計という 計算をしたくて過去の質問をヒントに自分なりに工夫して 作成いたしました。(JavaScriptは超初心者) 変数A~Bには整数が入ります。 自分で動作を確認したところ問題無く動くようですが、 何か問題がないか心配です。 これでいいのか、間違っているところがないか 確認願いますでしょうか。 <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- function calc() { document.f.t4.value = eval(250) * eval(document.f.t1.value)+eval(200) * eval(document.f.t2.value)+eval(150) * eval(document.f.t3.value); return true; } //--> </SCRIPT> <TITLE></TITLE> </HEAD> <BODY> <FORM name="f"><INPUT type="text" name="t1" onkeyup="calc()" value="0"><INPUT type="text" name="t2" onkeyup="calc()" value="0"><INPUT type="text" name="t3" onkeyup="calc()" value="0"> = <INPUT type="text" name="t4"></FORM> </BODY> </HTML>

noname#10927
noname#10927

質問者が選んだベストアンサー

  • ベストアンサー
  • nipotan
  • ベストアンサー率59% (134/227)
回答No.1

ご希望の動作はこれで出来るかと思うんですが、何故に eval() を使ってるんでしょう? 全部 eval() ははずして、 document.f.t4.value = 250 * document.f.t1.value + 200 * document.f.t2.value + 150 * document.f.t3.value; ってすればいいのに…って思います。 (eval() すると、各 value が消されたら NaN になりません?eval() じゃなければ、null は 0 として計算されます) あと、気になったのが、 > 変数A~Bには整数が入ります。 って事ですが、これでは整数以外の文字を入力されてしまいます。 その点は考慮に入れませんでした? それを抑止するのは、結構難しいとは思いますが…。 整数以外の入力を抑止するために、私だったら、例えば calc() を、 --- function calc(TextObject) { var re = new RegExp('(\\d*)\\D+(\\d*)', 'g'); if(TextObject.value.match(re)){ TextObject.value = RegExp.$1 + '' + RegExp.$2; } document.f.t4.value = 250 * document.f.t1.value + 200 * document.f.t2.value + 150 * document.f.t3.value; return true; } --- こういう風に書き換えて、各テキストボックスのイベントハンドラを onkeyup="calc(this)" にして、calc に対して自信のオブジェクトを渡して、数字以外を消す機能をつけます。 ちなみに、RegExp() を使ってるので、IE4、NN4 以上で動かすことを前提にしてますが、どうせ onkeyup イベントハンドラも同じく IE4、NN4 以降で動作するので、いいっかな~って感じです。

noname#10927
質問者

お礼

>eval() すると、各 value が消されたら NaN になりません? NaNになりました。 さっそくeval() は外しておきます。 >整数以外の入力を抑止するために~ すごい!すご過ぎる!! 私には絶対にできないワザです。 JavaScriptの奥の深さと言うか こんなこともできるなんて初めて知りました。 本当にありがとうございました。 また機会がありましたらよろしくお願いします。

関連するQ&A

  • 数値の掛け算の不具合について

    下記のようなページで <HTML> <HEAD> <script language="JavaScript"> <!-- function calc() { document.f.t3.value = eval(document.f.t1.value) * eval(document.f.t2.value); return true; } //--> </script> </HEAD> <BODY bgcolor="#FFFFFF"> <form name="f"> <input type="text" name="t1"> × <input type="text" name="t2" onkeyup="calc()"> = <input type="text" name="t3"> </form> </BODY> </HTML> 一番目のテキストフォームと2番目のテキストフォームに任意の数値を入力したら3番目のテキストフォームに掛け算された結果が表示されるというプログラムで、一番目に10.07と入力し、2番目に11を入力して掛け算をさせると110.77000000000001となってしまいます。 本当の結果は110.77なのですが。。。。 どなたか、原因、対処法をご存知の方、ご教授ください。 よろしくお願い致します。

  • JavaScriptで簡単な計算機を作りたいのですが…

    初めて質問させていただきます。タイトルどおり、以下の様なコードを組んだのですが答えが表示されません。なにぶんJavaScriptを勉強し始めて数日の初心者なもので、どこが悪いのか見当がつきません。レベルの低い質問で申し訳ないのですが、皆さんのお知恵をお貸しください。 <html> <head> <title>JAVAscript</title> <SCRIPT LANGUAGE="JavaScript"> <!-- function func(){ a=parseInt(document.masu.0.value); b=parseInt(document.masu.1.value); c=a+b; document.masu.2.value=c; //--> </SCRIPT> </head> <body> <form name="masu"> <input type="text" name="0" SIZE=10 onkeyup="chkNum(this)"> <input type="text" name="1" SIZE=10 onkeyup="chkNum(this)"> <input type="text" name="2" SIZE=10"onkeyup="chkNum(this)"> <input type="button" value="計算" onclick="func()"> </form> </body> </html>

  • ホームページ上での計算について(JavaScript)

    複数の計算式があります。 それぞれ、ホームページで数値を入れていって、最後に計算ボタンを押すと、計算した値が一気に出るようにしたいです。 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を足す」 という計算式を追加して、でも「計算」ボタンは一個のままで済ませるには、どうすればいいでしょうか。 もしできれば、全体のスクリプトをお教えいただけるととてもありがたいです。 よろしくお願い致します。

  • 超初心者です。buttonをselectに変えるには?

    <SCRIPT language="JavaScript"> function calc1(){document.keisan.Z.value=eval(document.keisan.X.value)*1;} function calc2(){document.keisan.Z.value=eval(document.keisan.X.value)*2;} function calc3(){document.keisan.Z.value=eval(document.keisan.X.value)*3;} </SCRIPT> </head> <FORM name="keisan" > <INPUT type="text" name="X" size="4"> <INPUT type="text" name="Z" size="6"> <INPUT type="button" value="1" onClick="calc1()"> <INPUT type="button" value="2" onClick="calc2()"> <INPUT type="button" value="3" onClick="calc3()"> <INPUT type="reset" value="やりなおし"> </FORM> これの INPUT type="button"を<select>~<select> に変えたいと思っています。 自分の頭ではいろいろやってもうまくいきませんでした。 どなたか御教授を宜しくお願い致します。

  • 同じFunctionで、同じ計算させたいのですが

    私は今、以下のようにここで教えていただいたプログラムを参考に組んでは見たものの、同じ行をいくつもコピペすると計算されなくなってしまいます。1行だけの計算でしようとするとうまく計算されるのですが・・・ <HTML> <HEAD> <TITLE> タイトルバーに表示されるテキスト </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!--JavaScript function SUM(){ if(!isNaN(document.sum.text1.value) && !isNaN(document.sum.text2.value) && !isNaN(document.sum.text3.value) && document.sum.text1.value && document.sum.text2.value && document.sum.text3.value){ document.sum.text4.value = eval(document.sum.text1.value) + eval(document.sum.text2.value) - eval(document.sum.text3.value) } if( !isNaN(document.sum.text5.value) && !isNaN(document.sum.text6.value) && document.sum.text5.value && document.sum.text6.value){ document.sum.text7.value = eval(document.sum.text4.value) + eval(document.sum.text5.value) + eval(document.sum.tex6.value) } } //--> </SCRIPT> </HEAD> <BODY> <FORM NAME="sum" onSubmit="SUM();return false;"> A<INPUT TYPE="text" NAME="text1" onChange="SUM()" SIZE="10"><BR> B<INPUT TYPE="text" NAME="text2" onChange="SUM()" SIZE="10"><BR> C<INPUT TYPE="text" NAME="text3" onChange="SUM()" SIZE="10"><BR> D=A+B-C<INPUT TYPE="text" NAME="text4" onChange="SUM()" SIZE="10"><BR> E<INPUT TYPE="text" NAME="text5" onChange="SUM()" SIZE="10"><BR> F<INPUT TYPE="text" NAME="text6" onChange="SUM()" SIZE="10"><BR> G=D+E+F<INPUT TYPE="text" NAME="text7" onChange="SUM()" SIZE="10"><BR> </FORM> </BODY> </HTML>

  • javascriptの計算フォームでカンマ区切り

    下記のようなjavascriptの計算フォームで計算結果に3ケタのカンマ区切りと小数点第2位までで切り捨てるようにしたいのですがどのようにすればよろしいでしょうか? 「javascript カンマ区切り」で検索したサイトをいろいろ見てみたのですが全然わかりません。 どなたかご教授お願い致します。 <head> <script language="JavaScript" type="text/JavaScript"> <!-- function Multiplication(form){ var test = form.ans.value = eval(form.num1.value)*eval(form.num2.value); return false; } --> </script> </head> <p>A×B×C=合計</p> <div> <form name="multiplication"> <input type="text" size="6" name="num1"> × <input type="text" size="6" name="num2" onBlur="Multiplication(this.form)"> = <input type="text" size="15" name="ans" class="txtbox">円(税別価格) <input type="reset" value="やり直し"> </form> </div> </body> </html>

  • javascriptでフォームの値の計算

    javascript1か月目の初心者です。 7つのテキストフィールドに数値を代入させて合計と平均(最後には標準偏差)を計算しようと思ってます。 以下のように考えましたが、うまくいきません。 strが文字列として?扱われてしまっているようです。 strをevalで囲んでみてもダメです。 詳しい方教えてください。 <!--スクリプト1--> <SCRIPT LANGUAGE="JavaScript"> <!-- function f_check() { if(document.F1.num1.value!=""&&document.F1.num2.value!=""&&document.F1.num3.value!=""&&document.F1.num4.value!=""&&document.F1.num5.value!="" &&document.F1.num6.value!=""&&document.F1.num7.value!=""){ str=0 for(var i = 0;i<document.F1.length;i++){ str+=document.F1[i].value; } alert('合計は'+str+"です"); avrg = (str)/document.F1.length; alert('平均は'+avrg+'です'); //ここから標準偏差の計算(略)。 } // --> </SCRIPT> <form method="post" name="F1" onSubmit="return f_check()"> 数値を入れてください<input type="text" name="num1" size="5"><br> 数値を入れてください<input type="text" name="num2" size="5"><br> 数値を入れてください<input type="text" name="num3" size="5"><br> 数値を入れてください<input type="text" name="num4" size="5"><br> 数値を入れてください<input type="text" name="num5" size="5"><br> 数値を入れてください<input type="text" name="num6" size="5"><br> 数値を入れてください<input type="text" name="num7" size="5"><br> <INPUT TYPE=SUBMIT VALUE="平均をとる"></FORM>

  • 初歩がわかりません。

    おとといJavascriptはじめたものです。 VBやHTMLなどは少しだけ触ったことがあります。 足し算のプログラムで意味がわからない部分があり困っています。 <html> <head> <script language="javascript"> <!-- function calc(CL) { CL.Z.value = eval(CL.X.value)+eval(CL.Y.value) } //--> </script> </head> <body> フォームを使った計算 <form name="Calc"> <input type="text" name="X" value="0" size=10> + <input type="text" name="Y" value="0" size=10> = <input type="text" name="Z" size=10> <p> <input type="button" value="計算!!" onclick="calc(this.form)"> <input type="reset" value="clear"> </form> </body> </html> 上記のプログラムで、onclick="calc(this.form)"とありますが、どういう動作させているのでしょうか。 またSCRIPTのなかの function calc(CL) { CL.Z.value = eval(CL.X.value)+eval(CL.Y.value) } CL.X.value のvalueてなんのことでしょうか。 XとYを取り出して足しているってことはなんとなくわかるんですけれど。。 特に同一ページ内のjavascriptにpost?するっていうのがよくわかりません。 この場合どうやってSCRIPTに送って、どうやって数値を取り出しているのか、どなたかアドバイスお願いいたします。よろしくおねがいします。

  • セレクトボックスを使った計算式

    テキストボックスに文字を入力してセレクトボックスで四則計算 をプルダウンメニューで選択し、3つ目のテキストボックスに 計算結果を表示するにはどのようにしたらよいのでしょうか? とりあえず途中まで作ってみました。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>スクリプト練習</title> <script type="text/javascript"> <!-- function keisan(){     if(option value="+"){     document.f1.t3.value(document.f1.t1.value + document.f1.t2.value); } } //--> </script> </head> <body> <form name="f1"> <input type="text" size="5" name="t1"> <select name="color2"> <option value="+">+</option> <option value="-">-</option> <option value="×">×</option> <option value="÷">÷</option> </select> <input type="text" size="5" name="t2"> <input type="button" value="=" onClick="keisan()"> <input type="text" size="5" name="t3"> </form> </body> </html> if文を作るところが特にわからず止まっています。 どうかよろしくお願いします。

  • Javaで計算結果によって文字色を変えたい

    下記のような計算プログラムを検討しています。 全くの素人なので、ネットで参考になるものを探して、やっとここまで出来ました。 計算結果の値によって文字色を変えたいのですが上手くいきません。 例えば、数値が100以上であれば青、200以上であれば、赤・・・というように設定したいのですが、どのように記述すれば良いでしょうか。 よろしくお願い致します。 <HTML> <HEAD> <TITLE>計算</TITLE> </HEAD> <BODY> <SCRIPT language="JavaScript"> <!-- function keisan1(x1,x2){ a=0.2*(eval(x1)/10)*(eval(x1)/10)*Math.sqrt(eval(x2))*1000; return a.toFixed(0);} function keisan2(x1,x2,x3,x4,s1){ b=eval(x2)+Math.pow((0.2*(eval(x1)/10)*(eval(x1)/10)*Math.sqrt(eval(x2))),2)*eval(document.getElementById('s1').value)*eval(x3)+0.01*eval(x4); return b.toFixed(2);} function keisan3(x1,x2){ c=200*Math.pow((eval(x1)/10),2)*(eval(x2)); return c.toFixed(0);} //--> </SCRIPT> <H3>TEST</H3> <FORM name="fk">※ 条件を入力して下さい <BR> <BR> 条件(1)<SELECT name="s1" id="s1" onchange="b();"> <OPTION value="0.2">A</OPTION> <OPTION value="0.9">B</OPTION> </SELECT> <BR> 条件(2)<INPUT size="10" type="text" name="d1" style="text-align:right"><BR> 条件(3)<INPUT size="10" type="text" name="d2" style="text-align:right"><BR> 条件(4)<INPUT size="10" type="text" name="d3" style="text-align:right"><BR> 条件(5)<INPUT size="10" type="text" name="d4" style="text-align:right"><BR> <BR> <INPUT type="button" value="計算開始" onclick="document.fk.calc1.value=keisan1(document.fk.d1.value,document.fk.d2.value);document.fk.calc2.value=keisan2(document.fk.d1.value,document.fk.d2.value,document.fk.d3.value,document.fk.d4.value,document.fk.s1.value);document.fk.calc3.value=keisan3(document.fk.d1.value,document.fk.d2.value);"> <BR> 回答(1)<INPUT size="10" type="text" name="calc1" style="text-align:right"> <BR> 回答(2)<INPUT size="10" type="text" name="calc2" style="text-align:right"> <BR> 回答(3)<INPUT size="10" type="text" name="calc3" style="text-align:right"> </FORM> </BODY> </HTML>

専門家に質問してみよう