• ベストアンサー

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

下記のようなページで <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なのですが。。。。 どなたか、原因、対処法をご存知の方、ご教授ください。 よろしくお願い致します。

  • Ants
  • お礼率95% (45/47)

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

  • ベストアンサー
  • a-kuma
  • ベストアンサー率50% (1122/2211)
回答No.3

> ちなみに、掛け算だけこのような問題がでるのでしょうか? > 割り算などでは問題は起きないのでしょうか? これは、実数が浮動小数点で表現されていることに起因する問題ですから、演算の 種類に限らず発生する問題です。 手元の NN4.7x で確認したのですが、例えば、以下のような計算が期待通りにいきません。   1.01 + 1.1   1.01 - 1.1   12.3 / 0.3 > これは、ひどいですよね。Javascriptは。 先ほども書いた通り、浮動小数点を扱うものは全てこの問題を抱えています。 JavaScript がひどいとしたら、実数をフォーマットして出力してくれる仕組み (C だったら printf() 関数とか)を標準で用意していないことです。 まあ、みんなが欲しくなるものは、誰かが作っていたりします。例えば、参考URLの ページなんかが。

参考URL:
http://aoki2.si.gunma-u.ac.jp/JavaScript/src/io.html
Ants
質問者

お礼

ご回答ありがとうございます。 printf関数を利用すればよいのですね。 printfは書式付の書き出しという意味ですか? ただ、printf()関数をどういった形で利用すればよいのでしょうか? すみません。プログラムの基本をわかってないものですから。

その他の回答 (4)

  • xruz
  • ベストアンサー率50% (72/143)
回答No.5

こんにちは、xruzです。 誤差が生ずるのは2進数で演算しているためです。 回避方法(小数点以下が2桁の場合): <HTML> <HEAD> <script language="JavaScript"> <!-- function calc() { document.f.t3.value = ((parseFloat(document.f.t1.value) * 100.0) * parseFloat(document.f.t2.value)) / 100.0 ; 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> がんばってくださいね(^:^i

Ants
質問者

お礼

ご回答ありがとうございます。 >document.f.t3.value = ((parseFloat(document.f.t1.value) * 100.0) * parseFloat(document.f.t2.value)) / 100.0 ; parseFloatを使って、100をかけ、あとで100で割るという作業をするのですね。

  • A__
  • ベストアンサー率47% (22/46)
回答No.4

割り算でも誤差が生じる場合があるみたいです。 整数の足し算でも誤差が生じる場合があります。 桁数が多いとなるみたいです。

Ants
質問者

お礼

お返事有難うございます。 下記のa-kumaさんのようになるのですね。 実際に試してみましたら、 1.01-1.1=09000000000000008 となりました。 (私はWINのIE6です)

  • A__
  • ベストアンサー率47% (22/46)
回答No.2

alert(10.07*11) が 110.77000000000001 になりました。 小数の場合、数字の最後の部分が 0001 と 9999 の ような誤差が発生する場合がある。 小数の掛け算なら計算結果の小数の桁が予想できるから、 10.07*11 なら、小数は第2位までだと分かっているから 計算結果の数字から、コンマがあれば、コンマの右の 2つの数字までをコンマ無しで抜き出して、11077 小数第3位が9であれば1を足す。 最後にコンマを戻して 11077 にする。 10.07*0.145 なら、小数は第5位までだと分かっているから 計算結果の数字から、コンマがあれば、コンマの右の 5つの数字までをコンマ無しで抜き出して、146014 小数第6位が9であれば1を足す。 最後にコンマを戻して 1.46015 にする。 こんな感じでも出来そうです。

Ants
質問者

お礼

貴重なご意見有難うございます。 なるほど、999の場合と001のパターンで場合わけするのですね。 ちなみに、掛け算だけこのような問題がでるのでしょうか? 割り算などでは問題は起きないのでしょうか?

回答No.1

こんばんわぁ、Blackwinglsです。 これは恐らく丸め処理のせいでしょう。 ブラウザではこの丸め処理の誤差部分まで表示してしまうようなので、11.1+111.1 が正しい計算結果が得られない、という話をどこかで聞いた覚えがあります。 結局、作成者側で何桁まで必要か考えて四捨五入するしかないようです。 <script language="JavaScript"> <!-- function calc() { var a = eval(document.f.t1.value) * eval(document.f.t2.value) var b = Math.round(a * 100) / 100 document.f.t3.value = b return true; } //--> </script> というのではどうでしょうか? 2桁まで求めるようにしています。 ではでは(@^^)/~~~

Ants
質問者

お礼

ご回答ありがとうございます。 たぶん、誤差の問題だろうとは思っていましたが。。 これは、ひどいですよね。Javascriptは。 2桁ですか。。 もっとほしいときもあるのですが、危険ですよね。 その都度考えるようにします。

関連するQ&A

  • 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>

  • 超初心者です。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> に変えたいと思っています。 自分の頭ではいろいろやってもうまくいきませんでした。 どなたか御教授を宜しくお願い致します。

  • java 計算フォームで未入力の場合ゼロとしたい

    java を使ってweb上で計算フォームを作成しています フォームに数値が入力された場合は問題なく計算結果に反映できますが、未入力のフォームがあると計算結果が反映されません。 未入力のフォームはゼロの値として計算結果を反映させたいのですが、どうしてもできなかったのでお力をお貸頂ければ助かります>< フォームに最初からゼロの値を入れておく方法もあるのですが、ゼロが消された場合は未入力となってしまい計算結果に反映されないので、あくまで未入力の場合はゼロとして計算結果に反映させたいと思っています。 [script LANGUAGE="JavaScript"] function calc() { var s1, s2, s3, s4, ss; s1 = eval(document.form01.txt01.value); s2 = eval(document.form01.txt02.value); s3 = eval(document.form01.txt03.value); ss = s1+s2 +s3; if(ss < 30000) document.form01.txt04.value = ss*0.3; else if(s5 >= 30000) document.form01.txt04.value = ss*0.5; } [/script] <form name="form01"> <input style= type="TEXT" name="txt01" /> <input style= type="TEXT" name="txt02" /> <input style= type="TEXT" name="txt03" /> <input onclick="calc()" type="button" value="計算する" /> <input style= type="TEXT" name="txt04" /> </form> よろしくお願いします

  • 同じ作業を複数させる場合

    ちょっとタイトルのつけ方が下手でしたが、やりたいことはこんな感じです。 <FORM name="f1"> <INPUT type="text" name="t1" onblur="document.f1.t1a.value=this.value,document.f1.t1b.value=this.value.length;"> <INPUT type="text" name="t1a"> <INPUT type="text" name="t1b"> <FORM> と、このようなフォームをつくり、t1に半角文字を入力した際にt1a、t1bに入力された文字と その文字数を書き出すようにしたいのですが、これが複数あった場合にうまく省略する方法はないものか? と思い質問させていただきました。仮に、 <FORM name="f1"> <INPUT type="text" name="t1" onblur="document.f1.t1a.value=this.value,document.f1.t1b.value=this.value.length;"> <INPUT type="text" name="t1a"> <INPUT type="text" name="t1b"> <INPUT type="text" name="t2" onblur="document.f1.t2a.value=this.value,document.f1.t2b.value=this.value.length;"> <INPUT type="text" name="t2a"> <INPUT type="text" name="t2b"> <FORM> と、このような場合で10個も20個も同じ入力欄があった際に最もスクリプトを省略するには どのようにしたらいいのかがわかりません。 同じことを何度も繰り返し書くのは非効率に思えてならないのでどなたかいい方法をご存知の方の 知恵をお借りしようと思った次第です。よろしくお願いします。

  • 同じ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>

  • textbox間の結合時、空白の時は、スペースを省きたい

    <script type="text/javascript"> <!-- function ketugou(){     document.f.q.value=document.f.t1.value+" "+document.f.t2.value+" "+document.f.t3.value+" "+document.f.t4.value+" "+document.f.t5.value; } //--> </script> <form name="f"> キーワードを入力:<br> <input type="text" size="55" name="t1"><br> <input type="text" size="55" name="t2"><br> <input type="text" size="55" name="t3"><br> <input type="text" size="55" name="t4"><br> <input type="text" size="55" name="t5"><br> <input type="button" name="connect" value="結合" onClick="ketugou()"><br> 結合時の内容を表示:<br> <input type="txt" name="q" size="55" maxlength="255" ><br> </form> で、空白のテキストボックスの場合は、スペース(" ")なしで、 結合させたいんですが、どうしたら、良いのでしょうか?

  • 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>

  • フォームに入力された値を計算する方法

    私はまったくの初心者なのですがどなたか教えて下さい。 ●A,B,Cという3つの入力フォームがあるとします。 Aのフォームに入力された数字は「A÷20」という値に、 Bのフォームに入力された数字はそのまま、 Cのフォームに入力された数字は「C×10」という値に変更して、 (A+C)÷B×30という計算を行なって、その答えを Dのフォームへ表示するというシステムをcgiやphpで作りたいのです。 あれこれと試行錯誤しながら、javascriptでなんとか出来たんですが… どなたか教えて頂けませんか? function keiri() { a = document.takeko.case.value; a = eval(a); a = a / 20 b = document.takeko.time.value; b = eval(b); c = document.takeko.days.value; c = eval(c); c = c * 10 ans = (a + c) / c * 30; document.spec.result.value = ans; } <form name="takeko"> <input name="case" type="text" size="12"> <input name="time" type="text" size="12"> <input name="days" type="text" size="12"> <input name="button" type="button" onClick="keiri()" value="CLICK"> <input name="result" type="text" size="12"> <br></form>

    • 締切済み
    • PHP
  • Java 計算結果の表示ボックスの書式を変えたい

    計算結果が表示されるボックスの表示(回答(1)(2)(3)のみ)を下記のようなバリエーションで変えたいのですが、どのように記述すれば良いでしょうか。 (1)枠線の色を変えたい (2)枠線の太さを変えたい (3)枠線内(ボックス)を一定の時間で、任意の色で点滅させたい(現在は条件をつけて枠内の色が変わるように記述しています) よろしくお願い致します。 <HTML xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <TITLE>計算テスト</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <FONT SIZE="3"> <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.1*eval(x4); return b.toFixed(2);} function keisan3(x1,x2){ c=20*(eval(x1)/10)*(eval(x1)/10)*(eval(x2)); return c.toFixed(0);} function calc(){ // ← 計算ボタンが押されたらこの関数が呼ばれる   var d1 = document.fk.d1;   var d2 = document.fk.d2;   var d3 = document.fk.d3;   var d4 = document.fk.d4;   var s1 = document.fk.s1;   var ans1 = keisan1(d1.value, d2.value);   var calc1 = document.fk.calc1;   calc1.value = ans1;   var ans2 = keisan2(d1.value, d2.value, d3.value, d4.value, s1.value);   var calc2 = document.fk.calc2;   calc2 .value = ans2 ;   if(ans2 >= 0) calc2.style.color = "#e60000";   if(ans2 >= 0) calc2.style.backgroundColor = "#ffffff";   if(ans2 >= 1.4) calc2.style.color = "#ffffff";   if(ans2 >= 1.4) calc2.style.backgroundColor = "#e60000";   var ans3 = keisan3(d1.value, d2.value);   var calc3 = document.fk.calc3;   calc3.value = ans3;   if(ans3 <180) calc3.style.backgroundColor = "#D5FFCB";   if(ans3 >=180) calc3.style.backgroundColor = "#FFCC99";   if(ans3 >=270) calc3.style.backgroundColor = "#FF9999"; } //--> </SCRIPT> <FONT SIZE="5"><B>計算</B></font><BR> <FORM name="fk"> <FONT SIZE="3">   ●条件(1):<INPUT size="7" type="text" name="d1" style="text-align:right"><BR>   ●条件(2):<INPUT size="7" type="text" name="d2" style="text-align:right"><BR>   ●条件(3):<SELECT name="s1" id="s1" onchange="b();"> <OPTION value="0.1">A</OPTION> <OPTION value="0.2">B</OPTION> </SELECT> <BR>   ●条件(4):<INPUT size="7" type="text" name="d3" style="text-align:right"><BR>   ●条件(5):<INPUT size="7" type="text" name="d4" style="text-align:right"><BR> <BR>   <INPUT type="button" value="計算開始" onclick="calc()"> <BR> <BR>   ◆回答(1):<INPUT size="7" type="text" name="calc1" style="text-align:right"><BR>   ◆回答(2):<INPUT size="7" type="text" name="calc2" style="text-align:right"><BR>   ◆回答(3):<INPUT size="7" type="text" name="calc3" style="text-align:right"><BR> <BR> </FONT> </FORM> </BODY> </HTML>

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

    テキストボックスに文字を入力してセレクトボックスで四則計算 をプルダウンメニューで選択し、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文を作るところが特にわからず止まっています。 どうかよろしくお願いします。