質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • JavaScript

    19819questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,345
退会済みユーザー

退会済みユーザー

前提・実現したいこと

いつもお世話になっております。
現在カートの商品ページを想定し開発をしておりまして、
.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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+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)+ "円");

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/10 14:35

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

    キャンセル

  • 2017/02/10 14:41

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

    キャンセル

  • 2017/02/10 14:49

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

    キャンセル

+2

price = separate(price);


priceをstring型にしているのに

price * valCnt


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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/10 14:28

    turbgraphics200さん

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

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    19819questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。