自動計算の追加質問

質問

さきほどいただいた自動計算Scriptありがとうございました。さて英語でのサイトも作っていて、こちらの方は、29.99ドルといった小数点以下の数値を使いたいですが、うまくいきません。いただいたどのスクリプトでも、合計がおかしな数字ででてきてしまうのです。例えば以下のスクリプトで、商品サンプル１を１つ選ぶと合計は36.99であるはずなのに、36.989999999999995と出てしまうのです。

どうしたら良いでしょうか？

なにとぞよろしくお願い申し上げます。

<style type="text/css">
table {border-collapse: collapse;}
table, th, td {border: 1px #808080 solid;}
th, td {padding: 3px 10px;}
th {background-color: #d3e9fa;}
td {background-color: #ffffff;}
td strong {color: #ff0000;}
</style>
<script>
function keisan(){
var price1 = document.form1.goods1.selectedIndex * 29.99;
document.form1.field1.value = price1;
var price2 = document.form1.goods2.selectedIndex * 6;
document.form1.field2.value = price2;
var price3 = (price1 || price2) ? 7: 0;
document.form1.field3.value = price3;
var total = price1 + price2 + price3;
document.form1.field_total.value = total;
}
</script>

</head>

<form action="#" name="form1">
<table>
<tr>
<th>商品名</th>
<th>単価</th>
<th>数量</th>
<th>金額</th>
</tr>
<tr>
<td>商品サンプル1</td>
<td align="right">$29.99</td>
<td><select name="goods1" onChange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select></td>
<td>$<input type="text" name="field1" size="8" value="0"></td>
</tr>
<tr>
<td>商品サンプル2</td>
<td align="right">6</td>
<td><select name="goods2" onChange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select></td>
<td>$<input type="text" name="field2" size="8" value="0"></td>
</tr>
<tr>
<td>送料</td>
<td align="right">$7</td>
<td>　</td>
<td>$<input type="text" name="field3" size="8" value="0"></td>
</tr>
<tr>
<td align="right" colspan="3"><strong>合計</strong></td>
<td>$<input type="text" name="field_total" size="8" value="0"></td>
</tr>
</table>
</form>

さきほど二重ポストをしてしまいましたが、このサイト、以前は質問するとすぐに反映されたのですが、いまはすぐに質問が出てこなかったのです。そんなわけで２回同じ質問を投稿してしまいました・・・。そのせいか一度目の質問は勝手に締め切りにされてしまいました。OneOneさん失礼いたしました。。

回答No.1

yambejp · ベストアンサー

これはIEEE 754といって結構面倒な話なのですが、手っ取り早くは一度整数化してから
小数点に戻すことです。
(これも完全ではないですが、命題の例であれば正しくなるはずです)

function keisan(){
var price1 = document.form1.goods1.selectedIndex * 29.99;
document.form1.field1.value = price1.toString();
var price2 = document.form1.goods2.selectedIndex * 6;
document.form1.field2.value = price2.toString();
var price3 = ((price1 || price2) ? 7: 0).toString();
document.form1.field3.value = price3;
var total = (price1*100+price2*100+price3*100)/100;
document.form1.field_total.value = total;
}

興味があれば以下のサイトを参照ください
http://pc.nikkeibp.co.jp/pc21/special/gosa/eg4.shtml

お礼

yambejpさん、どうもありがとうございました！
感謝感謝です！！

補足

やってみました。上のスクリプトをそのままペーストしてみました。すると、、、、

おお！！すばらしい。できました！

回答No.2

Ogre7077

10進数の整数を前提とする金額計算に、
2進数の浮動小数点数を使うのは、
精度とか丸めなどの問題により、
計算額に誤差が含まれるという問題があります。

ですので通常は整数で計算して、
表示だけを小数点っぽく見せる手段を使います。

var total = 2999 * 1 + 700;
(total / 100 | 0) + "." + (total % 100) // "36.99"

ですが以下の様にすれば、
大抵の場合で表示上は問題なく見せることができます。

var total = 29.99 * 1 + 7;
total.toString() // "36.989999999999995"
total.toFixed(2) // "36.99"

ただしこれは誤差を見えにくくしているだけなので、
本気でやるなら必ず整数を使ってください。

お礼

ありがとうございました！