計算結果がおかしい
- 本体金額と消費税率を入力して税込金額を計算する関数を作成しました。
- しかし、一部の計算結果が正しくない場合があります。
- 小数点以下を切り捨てることで解決できますが、原因は何でしょうか。
- ベストアンサー
計算結果がおかしい
計算結果がおかしい <form name="form1"> <h2>消費税計算</h2> <p>本体金額 <input type="text" value="0" class="right" name="text4">円</p> <p>消費税率 <input type="text" value="0" class="right" name="text5">%</p> <p>税込金額 <input type="text" value="0" class="right" name="text6" onFocus="zei()">円</p> </form> htmlで上記のようなテキストフィールドを3つ作成し、それぞれ上から順に [text4～text6]の名前をつけています。 本体金額（text4）と消費税率（text5）に入力された値をもとに、 text6に税込金額を表示するように以下の関数をjavascriptで<head>タグ間に記述しました。 <script type="text/javascript"> <!-- function zei(){ document.form1.text6.value=document.form1.text4.value*(1+document.form1.text5.value/100); } //--> </script> 実際に値を入力してみると、計算結果が正常な場合とそうでない場合があります。 例えば、本体金額のボックスに500、消費税率の欄に10と入力すると、550と表示され 問題はないのですが、本体金額を200に変更すると 「220.00000000000003」と表示されます。 小数点以下を切り捨てれば済む話ですが・・・・・ 計算結果が違っているのが気になります。 これは何故なのでしょう？ 原因がおわかりの方がおられましたら、ご教示ください。 どうか宜しくお願いいたします。
- super_step
- お礼率65% (27/41)
- JavaScript
- 回答数2
- ありがとう数7
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
整数同士の掛け算をしてから10のn乗でわれば誤差はすくなくなります。 <script> function zei(obj){ var f=obj.form; f.elements["text6"].value=parseInt(f.elements["text4"].value)*(100+parseInt(f.elements["text5"].value))/100; } </script> <form id="form1"> <h2>消費税計算</h2> <p>本体金額 <input type="text" value="0" class="right" name="text4">円</p> <p>消費税率 <input type="text" value="0" class="right" name="text5">%</p> <p>税込金額 <input type="text" value="0" class="right" name="text6" onFocus="zei(this)">円</p> </form>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
機械の内部では2進計算をしているので、ある範囲の誤差が出ることがあります。 でも、ご質問の程度の計算でしたら、なるべく整数計算を優先させるようにして、 document.form1.text4.value*(1*document.form1.text5.value+100)/100; のようにすれば、よろしいかと。（割算を最後に行なうようにしている）
お礼
fujillin様 2進数で計算しているがゆえの誤差だったのですね。 わたくしの様な初心者にも分かりやすい説明、 本当にありがとうございました。 回答をくださった皆様への感謝の度合いは同じですので、 順番付けはしたくありませんが、 ベストアンサーは、回答の早かった順とさせていただきました。
関連するQ&A
- 変数と関数の使い方について質問です。
変数と関数の使い方について質問です。 現在JavaScriptを勉強しています。（超初心者ですのでバカな質問だと思いますがすみません）、変数を宣言して関数の中で使おうとしているのですが、うまく行きません。 以下のように書いて計算をしたいのですが。 <html lang="ja"> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- var moneyin = document.form1.text1.value; var moneyout = document.form1.text2.value; function zandaka(){ document.form1.text3.value=moneyin-moneyout; } --> </script> <title>簡単計算機</title> </head> <body> <h1>簡単計算機</h1> <hr> <h2>収支計算</h2> <form name="form1"> <p>収入 <input type="text" value="0" class="right" name="text1">円</p> <p>支出 <input type="text" value="0" class="right" name="text2">円</p> <p>残高 <input type="text" value="0" class="right" name="text3" onfocus="zandaka()">円</p> </form> </body> </html> 関数の中に変数の宣言をすればうまく行くのですが、関数の外で変数の宣言をすると結果がNaNになります。 なぜでしょうか？変数は関数の外でまとめてしても良いのではないのでしょうか？？ この考え方自体が間違いでしょうか？ バカな質問だとは思いますが、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- javascriptの計算結果をvalue=""に
javascriptの計算結果をフォームの中のvalue=""内部に表示し、送信できるようにしたいというのが質問の趣旨です。 記 下記の2つのファイルで、フォームから入力した数値同士の「足し算の結果」を表示できます。 （HTMLファイル下段 <p id="message"></p>の部分で表示します。） ******************************************** 【HTML】 <script language="JavaScript" type="text/javascript" src="js/culc.js"></script> <form name="f1"> <input type="text" id="text1" name="text1" size="10" maxlength="10" />+ <input type="text" id="text2" name="text2" size="10" maxlength="10" /> <input type="button" value="足す" onclick="readText()" /> </form> <p id="message"></p> ******************************************* 【JAVASCRIPT(culc.js)】 function readText() { var text1 = document.getElementById("text1"); var text2 = document.getElementById("text2"); var message = document.getElementById("message"); var str_val1 = text1.value; var str_val2 = text2.value; var sum; if (isNaN(str_val1) || str_val1 == "" || isNaN(str_val2) || str_val2 == "") { textMessage = "数値以外の文字が入っています"; } else { //sum = str_val1 + str_val2; sum = parseFloat(str_val1) + parseFloat(str_val2); textMessage = "合計は、" + sum + "です"; } message.innerHTML = textMessage; } ************************************************ 【質問】 次にこのHTMLを改造し、フォームから計算値を送信することとしました。 ************************************************ 【HTML】 <script language="JavaScript" type="text/javascript" src="js/culc.js"></script> <form name="f1"> <input type="text" id="text1" name="text1" size="10" maxlength="10" />+ <input type="text" id="text2" name="text2" size="10" maxlength="10" /> <input type="button" value="足す" onclick="readText()" /> </form> <form action="form.cgi" method="post" name="form2" id="form2"> <input type="hidden" name="plus" value="<p id="message"></p>"> <input type="button" value="送信" onClick="disableButton()" name="button1"> </form> ************************************************ 問題点 上記のように、計算結果を表示出来るはずの<p id="message"></p>を送信フォームのvalue=の直後に記載しただけなのですが、なぜか送れません。 <p id="message"></p> を独立して記載しているときは計算値をそのまま表示していたのですが、value="<p id="message"></p>"> と value= の中に記載した瞬間に単なる文字の羅列になってしまうようです。 value="<p id="message"></p>"> value='<p id="message"></p>'> value="<p id='message'></p>"> value='<p id='message'></p>'> と試してみましたが、いずれもうまきませんでした。 どのようにすれば、value="" の中に計算結果が入るか教えてください。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- スタイルがうまく表示できません。
スタイルがうまく表示できません。 関数を作って収入と支出の計算をしているのですが、残高が0より小さい時は赤字で表示。0以上の時は青字で表示しています。 以下がソースなのですが、数字を何度も変更して確認したのですが、うまくいく時と行かない時があります。（マイナスでも青字になったり、マイナスではないのに赤字になったりすることがあります。何度やってもうまく行く時もあります） <html lang="ja"> <head> <script type="text/javascript"> <!-- function zandaka(){ moneyin = document.form1.text1.value; moneyout = document.form1.text2.value; document.form1.text3.value=moneyin-moneyout; if(moneyout>moneyin){ document.form1.text3.style.color="red"; } else{ document.form1.text3.style.color="blue"; } } --> </script> <title>簡単計算機</title> </head> <body> <h1>簡単計算機</h1> <hr> <h2>収支計算</h2> <form name="form1"> <p>収入 <input type="text" value="0" class="right" name="text1">円</p> <p>支出 <input type="text" value="0" class="right" name="text2">円</p> <p>残高 <input type="text" value="0" class="right" name="text3" onfocus="zandaka()">円</p> </form> </body> </html> うまくいかない時と行く時の区別がつかないため原因がわかりません。 初心者なのでつまらないミスだとは思うのですが、原因がわかればお願いします。
- ベストアンサー
- JavaScript
- 計算結果の表示方法を教えてください。
javascriptでのプログラム作成がはじめてで 下記のようにINPUTへの計算結果を表示はできましたが、 INPUTを使用せず消費税を表示する方法を教えてください。 yahooかんたん決済の（運賃を入力すると合計が表示）様な 計算結果の表示方法を教えてください。 おそらく<SPAN>を使って表示していると思うのですがわかりません。 宜しくお願いします。 【省略】 <script type="text/javascript"> function keisan(){ var syouhizei = document.form1.syouhin1.value * 0.05; document.form1.field1.value = syouhizei; } </script> 【省略】 <tr> <td>商品サンプル1</td> <td align="right">500円</td> <td><INPUT type="text" name="syouhin1" size="8" onkeyup="keisan()"></td> <td><input type="text" name="field1" size="8" value="0"> 円</td> </tr>
- ベストアンサー
- JavaScript
- javascriptの計算結果をweb上に表示
WEB上で入力した数値から複数の計算をさせ、それをフォームからcgiに送るjavascriprを組みたいと思っています。 【現在保有のスクリプト】 下記のスクリプト1では、text1 text2 欄に数値を入力した後、「計算」ボタンを押し、送信ボタンを押すと、計算結果をcgiに送ることが可能です。 （下記の場合は、「入力数値の和」と「積」の2つの数値の送信する) 【やりたいこと】 text1 text2 欄に数値を入力した後、「計算」ボタンを押したあとに、「和と積がブラウザ上に表示され、確認した後に「送信ボタン」を押せるようにしたい。 ということで、修正したのがスクリプト2です。 【質問事項】 スクリプト2では、スクリプト1をベースに javascript上に msg.innerHTML = msg; msg2.innerHTML = msg2; を加え、 HTML上に <p id="msg"></p> <p id="msg2"></p> を加えていますが、これでは動きません。 上記に加え function readText() { var text1 = document.getElementById(""); などのパーツを入力する必要があるはずだと思うのですが、いろいろな場所に試行錯誤しておりますが、うまくいきません。 ご教示いただきたくお願いいたします。 【スクリプト1】************************************************ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test</title> <script type="text/javascript"> <!-- //@cc_on document./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', function( evt ) { var t = evt./*@if(1) srcElement @else@*/ target /*@end@*/ var v1, v2, msg, sum, msg2, sum2; if( t.type == 'button' && t.name == 'calc' && t.form.id == 'form2' ) { v1 = t.form.elements['text1'].value; v2 = t.form.elements['text2'].value; if ( isNaN( v1 ) || v1 == '' || isNaN( v2 ) || v2 == '' ) { msg = '数字以外の文字が入ってます'; } else { sum = parseFloat( v1 ) * parseFloat( v2 ); msg = '積は、' + sum + 'です'; sum2 = parseFloat( v1 ) + parseFloat( v2 ); msg2 = '和は、' + sum2 + 'です'; } t.form.elements['plus'].value = msg; t.form.elements['plus2'].value = msg2; } }, false ); //--> </script> </head> <body> <form action="form30.cgi" method="post" name="form2" id="form2"> <fieldset> <input type="text" id="text1" name="text1" size="10" maxlength="10" />+ <input type="text" id="text2" name="text2" size="10" maxlength="10" /> <input type="button" value="計算" name="calc" /> <br> <input type="hidden" name="plus" value=""> <input type="hidden" name="plus2" value=""> <input type="submit" value="送信" /> </fieldset> </form> </body> </html> **************************************************************** 【スクリプト2】上記を改造しweb上で計算結果を表示させたい******** <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test</title> <script type="text/javascript"> <!-- //@cc_on document./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', function( evt ) { var t = evt./*@if(1) srcElement @else@*/ target /*@end@*/ var v1, v2, msg, sum, msg2, sum2; if( t.type == 'button' && t.name == 'calc' && t.form.id == 'form2' ) { v1 = t.form.elements['text1'].value; v2 = t.form.elements['text2'].value; if ( isNaN( v1 ) || v1 == '' || isNaN( v2 ) || v2 == '' ) { msg = '数字以外の文字が入ってます'; } else { sum = parseFloat( v1 ) * parseFloat( v2 ); msg = '積は、' + sum + 'です'; sum2 = parseFloat( v1 ) + parseFloat( v2 ); msg2 = '和は、' + sum2 + 'です'; } t.form.elements['plus'].value = msg; t.form.elements['plus2'].value = msg2; msg.innerHTML = msg; msg2.innerHTML = msg2; } }, false ); //--> </script> </head> <body> <form action="form30.cgi" method="post" name="form2" id="form2"> <fieldset> <input type="text" id="text1" name="text1" size="10" maxlength="10" />+ <input type="text" id="text2" name="text2" size="10" maxlength="10" /> <input type="button" value="計算" name="calc" /> <br> <input type="hidden" name="plus" value=""> <input type="hidden" name="plus2" value=""> <p id="msg"></p> <p id="msg2"></p> <input type="submit" value="送信" /> </fieldset> </form> </body> </html> ****************************************************************
- ベストアンサー
- JavaScript
- 自動計算の合計金額を次ページで表示
いつも『教えて！goo』を活用させていただきありがとうございます。 またお世話になます。 今回はJavascriptで自動計算させた合計金額を、別ページで表示させることで困っております。 同じページで合計金額の表示はでき、それを基にパラメータで引き渡そうとしているのですが、なかなかうまくいきません。 同じページで合計金額の表示のタグ構成は以下のとおりです。 ＜自動計算側ページ：index.html＞＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head> <SCRIPT language="JavaScript"> <!-- function cal(f){ var price=0; for(var i=0;i<f.length;i++){ if(f[i].type=="radio" && f[i].checked) price+=parseInt(f[i].value); } f.price.value=price; } //--> </SCRIPT> </head> <body> <form> <p> <input type="radio" name="group1" value="30" />金：30円 <input type="radio" name="group1" value="20" />銀：20円 <input type="radio" name="group1" value="10" />銅：10円 </p> <p> <input type="radio" name="group2" value="400" />ダイヤモンド：300円 <input type="radio" name="group2" value="300" />サファイア：200円 <input type="radio" name="group2" value="200" />ルビー：100円 <input type="radio" name="group2" value="100" />アメジスト：100円 </p> <p> <input type="radio" name="group3" value="3000" />リチウム：3,000円 <input type="radio" name="group3" value="2000" />チタン：2,000円 <input type="radio" name="group3" value="1000" />白金：1,000円 </p> <hr /> <p><input type="button" value="合計金額を計算" onClick="cal(this.form)" /><br /> 合計：<input type="text" name="price" style="text-align:right" size="10" />円</p> </form> </body> </html> <p><input type="button" value="合計金額を計算" onClick="cal(this.form)" /><br /> 合計：<input type="text" name="price" style="text-align:right" size="10" />円</p> の箇所を<input type="submit" value="次ページで計算" />に書き換えて、 function cal(f){内に var pram="price="+price location.href="price.html?"+price; return false; を追記し、以上でテストすると ＜index.html?group1=30&group2=300&group3=1000#＞といった風に radioボタンのnameとvalueが付いてしまい＜price.html＞にリンクしません。 以下に＜合計金額表示ページ：price.html＞も明記させていただきますので 皆様には、大変ご迷惑をおかけしますが、何卒ご回答の程よろしくお願い申し上げます。 ＜合計金額表示ページ：price.html＞＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head> <SCRIPT language="JavaScript"> <!-- function pramWrite() { var pram=location.search; if (!pram) return false; pram=pram.substring(1); document.form1.price.value=pram; } //--> </script> </head> <body onload="pramWrite()"> <form name="form1" action="#"> 合計：<input type="text" name="price" style="text-align:right" size="10" />円 </form> </body> </html>
- ベストアンサー
- JavaScript
- ラジオボタンを押して計算結果を出した後、全てをｎｕｌｌ値に戻すには？
初心者ながらがんばっています。どうか宜しくお願いします。 <HTML> <head> <script language="JavaScript"> <!-- function calc(radio, form) { form.OUT.value = form.IN.value * radio.value; } //--> </script> </head> というスクリプト内容で、 計算する数値:<input type=TEXT name="IN" size=10 value=0> <input type=RADIO name="MODE" value="3.14" onClick="calc(this,this.form)"> cm 計算結果:<input type=TEXT name="OUT" size=10 value=0 style="text-align:right"> cm このラジオボタンをクリアして、計算する数値と計算結果の場所をブランクにするには、どのように組めば良いのでしょう。onclickを使うことは解るのですが、どんなふうに組んでも、うまく動作しません。
- ベストアンサー
- JavaScript
- チェックボックス（CGI）のズレをなくすにはどうすればよいでしょうか？
現在メールフォームを勉強中です。チェックボックスの項目を1つだけ設定していますが、チェックを外せば下の項目が上に一段ズレて送信されてきます。 チェックが外されていてもその項目だけ“空白”もしくは“チェックなし”とかに出来ますでしょうか？お手数ですが、ご教授ください。 【html側】 <form method="POST" action="mail.cgi"> <input type="text" name="01"> <input name="checkbox" type="checkbox" value="on"> <input type="text" name="02"> <input type="text" name="03"> <input type="submit" value="確認画面"> </form> 【cgi側】 $form0 = "01"; $form1 = "チェック"; $form2 = "02"; $form2 = "03"; if($form0 eq ""){ $form_input0 = ""; } else { $form_input0 = "<p class=\"text\">$form0 = $VALUE_DATE[0]</p>";} if($form1 eq ""){ $form_input1 = ""; } else { $form_input1 = "<p class=\"text\">$form1 = $VALUE_DATE[1]</p>";} if($form2 eq ""){ $form_input2 = ""; } else { $form_input2 = "<p class=\"text\">$form2 = $VALUE_DATE[2]</p>";} if($form3 eq ""){ $form_input3 = ""; } else { $form_input3 = "<p class=\"text\">$form3 = $VALUE_DATE[3]</p>";} <FORM method="post" action="mail.cgi"> <INPUT type="hidden" name="$form0" value="$VALUE_DATE[0]"> <INPUT type="hidden" name="$form1" value="$VALUE_DATE[1]"> <INPUT type="hidden" name="$form2" value="$VALUE_DATE[2]"> <INPUT type="hidden" name="$form3" value="$VALUE_DATE[3]"> <INPUT type="submit" value="この内容で送信する"></FORM> $mbody .= "\n"; $mbody .= "フォームより以下の内容が送信されました。\n"; $mbody .= "\n"; $mbody .= "=============================================================\n"; $mbody .= "\n"; $mbody .= "・$form0：$VALUE_DATE[0]\n"; $mbody .= "\n"; $mbody .= "・$form1：$VALUE_DATE[1]\n"; $mbody .= "\n"; $mbody .= "・$form2：$VALUE_DATE[2]\n"; $mbody .= "\n"; $mbody .= "・$form3：$VALUE_DATE[3]\n"; $mbody .= "=============================================================\n"; $mbody .= "\n"; ソースは文字制限の関係で省略しています。解りにくいですが、宜しくお願いします。
- 締切済み
- CGI
- インラインフレームを利用した計算ができなくて困っています。
JavaScriptは初心者です。ネット等にある情報を元に、試行錯誤で作成していますので、勘違い等が多々あるかと思いますが、ご教授の程を宜しくお願い致します。 複数行の明細項目をインラインフレームにもつ出張旅費精算のフォームを作成しています。test1.html（申請フォーム）には、期間、目的、宿泊費、合計税込金額、本体金額、消費税等の項目があり、test2.html（明細行：インラインフレーム）には、目的地までの交通費明細を持っています。 (1)ボタンを押すと、test1.htmlの宿泊費と、test2.htmlの明細の交通費を計算して、合計税込金額と自動計算させたいのですが、functionの中でforを使用して合計しようとしても正常に動きません。（※明細は20行程になる予定です） (2)最終的には、合計税込金額は、[計算]ボタンを押す前に、手入力されていた場合は、手入力した金額を優先にして、本体金額と消費税を自動計算して表示すること迄やりたいのですが、何か根本的に考え違いしているのでしょうか？下記にソースを記述いたしますので、何卒ご指摘、ご教授を宜しくお願い申し上げます。 [test1.html]<form name="f1">宿泊費<input type="text" name="syukuhaku" value=""> <iframe src="test2.html" name="MeisaiFrame"></iframe> <input type="button" name="btKeisan" value="計算" onClick="fnKeisan()"> 合計税込金額<input type="text" name="zeigokei" value="">（中略） function fnKeisan(){ piCnt = MeisaiFrame.f2.cnt.value - 1; for (var i = 0; i < piCnt; i++){ piGokei = piGokei + MeisaiFrame.document.f2.ryohi[i].value ;} piGokei = piGokei + document.f1.syukuhaku.value ; if (document.f1.zeigokei.value == ""){ document.f1.zeigokei.value = piGokei;} [test2.html]<form name="f2><input type="text" name="ryohi1" value=""> …
- ベストアンサー
- JavaScript
- Javascriptで自動計算の合計の式でエラー
度々すみません。 前回こちらで質問させて頂きましたものです。 http://okwave.jp/qa/q8737139.html 教えて頂いた内容を確認してフォームの合計を表示するところまでは出来たのですが、合計する列をひとつ増設した所、D列の合計は教えて頂いた式で合計が無事表示されたのですが、C列の合計が合計ではなく文字の並びが表示されてしまいました。 色々調べてみたのですが、この現象の原因がよくわかりません。 何かエラーがあるのでしょうか。 お知恵を貸して頂けると嬉しいです。 宜しくお願いします。 ＜スクリプト＞ <script type='text/javascript'> function keisan(){ var price1 = (document.form1.a1.value) * (document.form1.b1.value) * (document.form1.c1.value); document.form1.金額1.value = price1 ; var price2 = (document.form1.a2.value) * (document.form1.b2.value) * (document.form1.c2.value); document.form1.金額2.value = price2 ; var price3 = (document.form1.a3.value) * (document.form1.b3.value) * (document.form1.c3.value); document.form1.金額3.value = price3 ; document.form1.total.value = price1 + price2 + price3; var f1 = (document.form1.c1.value); document.form1.c1.value = f1 ; var f2 = (document.form1.c2.value); document.form1.c2.value = f2 ; var f3 = (document.form1.c3.value); document.form1.c3.value = f3 ; document.form1.ctotal.value = f1 + f2 + f3; } </script> ＜HTMLソース＞ <body> <form method="post" name="form1"> <table width="473" border='1'> <tr> <td align='center'> </td> <td align='center'>A</td> <td align='center'>B</td> <td align='center'>C</td> <td align='center'>D</td> </tr> <tr> <td>1</td> <td><input type='text' name='a1' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b1' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c1' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額1' style='width:100px' /></td> </tr> <tr> <td>2</td> <td><input type='text' name='a2' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b2' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c2' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額2' style='width:100px' /></td> </tr> <tr> <td>3</td> <td><input type='text' name='a3' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b3' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c3' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額3' style='width:100px' /></td> </tr> <tr> <td colspan="3" align='right'>合計</td> <td><input type='text' name='ctotal' style='width:25px' /></td> <td><input type='text' name='total' style='width:100px' /></td> </tr> </table> </form> </body>
- ベストアンサー
- JavaScript
お礼
yambejp様 早速の回答、ありがとうございました。 整数同士の掛け算を優先すれば誤差が少なくなるのですね。 そこまで考えなければいけないとは知らなかったので、勉強になりました。 ご親切にソースまで記述してくださり、感謝しております。 本当にありがとうございました。