Jqueryで数量の変更による金額表示をカンマ3桁で区切りたい

Question

###前提・実現したいこと
いつもお世話になっております。
現在カートの商品ページを想定し開発をしておりまして、
.itemPriceというクラスが付いた箇所にデフォルトの金額を表示させておいて、数量の変更により金額を乗算するという仕組みにしております。
乗算後の金額表示を3桁毎にカンマ区切りで表示をしたいのですが、「NaN」になってしまいます。
お手数おかけしますが、どなたかアドバイスを頂けますでしょうか？
よろしくお願いします。

###該当のソースコード

<script type="text/javascript">

$(function() {	
	//デフォルトの金額を取得
    var defaultPrice = setPrice($('.itemPrice').text());

	//数量が変更された場合
	$('[name="cnt"], .FS2_figure_table_td_updn_btn input[type="image"]').on('keyup keydown click', function() {
		price = defaultPrice;
		price = separate(price);
		var valCnt = $('[name="cnt"]').val();
		if(valCnt > 0){				
			$(".itemPrice").text(price * valCnt + "円");
		}
		else if(valCnt == 0){
			$(".itemPrice").text(price + "円");
		}					
	});		
    // 0～9, テンキ―0～9, スペース, backspace, delete, →, ←, 以外は入力キャンセル
    $('[name="cnt"]').on('keyup keydown', function(e) {
        var k = e.keyCode;
        if(!((k >= 48 && k <= 57) || (k >= 96 && k <= 105) || k == 32 || k == 8 || k == 46 || k == 39 || k == 37)) {
            return false;
        }
    });		
});

//数値を正規表現
function setPrice(priceText) {
    price = Number(priceText.replace(/[^0-9]/g, ''));
    return price;
}
// 正規表現でセパレート
function separate(num) {
    return String(num).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
}

</script>  

<!--ここの金額を変更-->
<span class="FS2_special_price">当店特別価格</span>
<span class="itemPrice">10,800円</span>

<form method="POST" action="">

<table border="0" cellspacing="2" cellpadding="0" class="FS2_figure_table">
<tbody>
<tr>
<td style="vertical-align:middle;">数量</td>
<td style="vertical-align:middle;"><input name="cnt" type="text" value="1" size="3" maxlength="16000"></td>
</tr>
</tbody></table>

</form>

###補足情報(言語/FW/ツール等のバージョンなど)
開発環境
https://js-form-price-test-yujiokayama.c9users.io/index.html

Answer 1

price = separate(price);

priceをstring型にしているのに

price * valCnt

string型で計算を行おうとしているからで、
separate()を呼ぶのは計算を行った後でやるべきです。

あと、カンマ区切りはnumber.toLocaleString()でできます。

Comments

[退会済みユーザー]

turbgraphics200さん

レスありがとうございます。
型を数値にしてるつもりでした・・・
「number.toLocaleString()」でもできるんですね。
参考になりました。
ありがとうございます！

Answer 2

separate()が実行されてから金額に掛け算がされていますね、ただしくはこうだと思います。

        price = defaultPrice;
        //price = separate(price);
        var valCnt = $('[name="cnt"]').val();
        if(valCnt > 0){                
            $(".itemPrice").text(separate(price * valCnt) + "円");
        }
        else if(valCnt == 0){
            $(".itemPrice").text(separate(price) + "円");
        }  

もしくは

        price = defaultPrice;
        //price = separate(price);
        var valCnt = $('[name="cnt"]').val();
        if(valCnt > 0){                
           price = price * valCnt;
        } else if(valCnt == 0){
           price = price//デッドコード？
        }  
        $(".itemPrice").text(separate(price)+ "円");

蛇足ですが０個のときでも１個の数量の金額が出てしまうのがちょっと気になりました。

Comments

[退会済みユーザー]

Neko_doshiさん
レスありがとうございます。
関数の順番が駄目だったんですね・・・
サンプルコードも頂きありがとうございます。
0のときで１個の数量の金額ですが、ここが仕様的にどうしようかと悩んでいる感じです。
0のときだと「0円」と表示されるのが嫌なので・・・

[Neko_doshi]

０と１に関しては決めの問題ですね、０個もしくはマイナスの数値が入ったときに０円にするときはelse if を else{price=0}とかにすればいいと思います。Validationも忘れずに。
BAありがとうございました。

[退会済みユーザー]

実装の方もうまく動きました！
この度はありがとうございました。
最後に追加のアドバイスもありがとうございますー。