3桁区切りについて

[新着] Webテンプレートを仮オープンしました

0   名前： nin ： 2006/07/19（水） 12:06  ID:kpTfZhhY
初心者です。
このホームページの自動計算フォームAタイプ
http://www.tagindex.com/javascript/form/comp1b.html
の金額、合計を3桁区切りにするにはどうすれば良いのでしょうか？
合計がどうしてもNaNになってしまいます。
よろしくお願いいたします。

1   名前： かふぇおれ ： 2006/07/19（水） 12:06  ID:Ji0blfRq
3桁毎にカンマを入れたまま計算しませんでしたか？
合計金額を計算後、3桁に変更すれば大丈夫（多分）。

function figout( n ) {
var l, m = '';
n = '' + n;
while ( (l = n.length) > 3 ) {
m = "," + n.substr( l - 3, 3 ) + m;
n = n.substr( 0, l - 3 );
}
n = '' + n + m;
return n;
2   名前： nin ： 2006/07/19（水） 12:06  ID:kpTfZhhY
回答ありがとうございます。
実は下記のようなプログラムを作ってまして...
なんとなくは理解できるのですが、
どこをどうすれば合計も３桁区切りになるかがわかりません。
申し訳ありませんがご指導いただけるとありがたいです。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type"text/css">
<!--

.textbox{text-align:right;}

-->
</style>

<title>HTMLサンプル　step02</title>
</head>
<script language="JavaScript">
<!--
function keisan(){
with(document.form1){
goukei.value=tanka.value*kosuu.value;
}
}

function setComma(srcValue) {
var destStr = srcValue;
var tmpStr = "";
while (destStr != (tmpStr = destStr.replace(/^([+-]?\d+)(\d\d\d)/,"$1,$2"))) {
destStr = tmpStr;
}
return destStr;
}

//-->

</script>
<body>
<table>
<form name="form1">
<tr>
<td>品名</td>
<td><input type="txt" name="hinmei" maxlength="20"></td>
</tr>

<tr>
<td>単価</td>
<td><input type="txt" name="tanka" class="textbox" onBlur="this.value=setComma(this.value)"maxlength="999999"></td>

</tr>

<tr>
<td>個数</td>
<td><input type="txt" name="kosuu" class="textbox" onBlur="this.value=setComma(this.value)"maxlength="99" ></td>
</tr>

<tr>
<td>合計(税抜き)</td>
<td><input type="txt" name="goukei" class="textbox" onBlur="this.value=setComma(this.value)" value=""></td>
<tr>
<td></td>
<td><input type="button" name="touroku" value=" 登録 " onClick="keisan()"></td>
</tr>
</form>
</table>
</body>
</html>
3   名前： かふぇおれ ： 2006/07/19（水） 12:06  ID:Ji0blfRq
そうか、onBlur で setComma() を呼び出しているのですね。
この形ですと、入力欄の数列が常に文字列になってしまっていますから、
合計がNaN（Not a Number）となるのです。

と、いう事で数列に戻してあげましょう。
function keisan(){
with(document.form1){
t_val = tanka.value.split(",");tanka.value = t_val.join("");
k_val = kosuu.value.split(",");kosuu.value = k_val.join("");
goukei.value=tanka.value*kosuu.value;
}
}


これでどうですか？
4   名前： m035 ◆Wpzr1YKOiq ： 2006/07/19（水） 12:06  ［URL］  ID:K4LL1oA9
withは使わない方が良いと思ったのと、フォームのvalueは数値でも文字列として扱われる環境があったような気がしたので以下。
function keisan(){
var f1=document.forms["form1"].elements;
var t_val=f1["tanka"].value.split(",").join("")-0;
var k_val=f1["kosuu"].value.split(",").join("")-0;
f1["goukei"].value=setComma(t_val*k_val+"");
}
5   名前： Pid ： 2006/07/19（水） 12:06  ID:dnZmT54N
念のため，>>2 の正規表現だと小数を扱えませんが，大丈夫でしょうか（たぶん大丈夫なのでしょうが）。


----

なお，m035 さんが仰るように，フォームコントロールの value 属性値は必ず文字列です。
http://www2u.biglobe.ne.jp/%7Eoz-07ams/prog/dom-ref/HTML/HTMLInputElement.html#HTMLInputElement-value
http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/reference/text.html#1193425

ただ，暗黙の型変換により「数字 - 数字」「数字 * 数字」「数字 / 数字」は計算できてしまいます。加算の場合のみ文字列連結になります。

暗黙の型変換のルールはややこしく，バグのもとにもなるので，>>4 のように明示的に数値変換しておくのをオススメします。


また，with に関しては下記参照。大抵の場合，with を使わない方が，よりシンプルで速いコードになります（どちらかと言えば，with は応急処置向きな気がします）。
http://www.mozilla-japan.org/rhino/perf.html

ただ，スコープチェーンさえしっかり理解していれば，
http://nanto.asablo.jp/blog/2006/07/08/437419
のような面白いこともできます。
6   名前： かふぇおれ ： 2006/07/19（水） 12:06  ID:MRwTGpOM
>>4 >>5
うひゃ、また私ったら、知ったかぶりをしてしまった様です。
何度も繰り返して、その度に反省しているのですが…。

nin さん、いい加減な知識でレスを付けてしまってすみませんでした。

#m035 さん、Pid さん、毎度補足説明すみません。
7   名前： nin ： 2006/07/19（水） 12:06  ID:kpTfZhhY
かふぇおれさん、m035さん、Pidさんありがとうございました！！
とても参考になりました。
まぁまだいろいろと問題もありますが．．．少しずつですが理解できるようになってきました。
ほんと感謝しております。
また何かありましたらどうぞよろしくお願いいたします。

一覧へ戻る