リアルタイムにカンマ(金額)を付けたい

javascript(jQueryではない)を使って、フォームに入力時、計算された値をリアルタイムに表示するのを作っています。

javascript
1function price() {
2        var se01_b = document.getElementById('se01_b').value;
3        var se01_c = document.getElementById('se01_c').value;
4        var tsubo = parseInt(se01_b) * 0.3025;
5        var kingaku = parseInt(se01_b) * 0.3025 * parseInt(se01_c);
6        if (isNaN(tsubo)) {
7          var tsubo = "";
8        }
9        if (isNaN(kingaku)) {
10          var kingaku = "";
11        }
12        document.getElementById('tsubo').innerHTML = tsubo;
13        document.getElementById('kingaku').innerHTML = kingaku;
14      }

上記のコードで動かすと、意図通りになり、仕上げにカンマを付けようと思っても、リアルタイムにカンマが付けれない。
どこにカンマを付けるコードはどのようなコードにすれば良いですか？

ちなみにカンマを付けるのは、｢kingaku｣の所です。
できれば、フォームの｢se01_c｣です。

m.ts10806

2018/09/01 13:23

リアルタイムにするにしても入力の元となるhtmlの提示がないと的確な回答にはつながりにくいかと。イベント発生のトリガーも単に「リアルタイム」だけでは正確には伝わりません。要件や前提条件を整理し、具体的に記載してください。

m.ts10806

2018/09/01 13:24

あとコード後の日本語が若干おかしいです。「意図通り」が何なのかこれだけではわかりませんし、「どこにカンマをつけるコードはどのように」意味不明です。もう少し伝わりやすい文章に調整していただければと思います。

m.ts10806

2018/09/01 13:25

一般的に「ナンバーフォーマット」という形式を表す表現がありますが、それで間違いないのでしょうか。

amaryllis

2018/09/02 01:01

回答をありがとうございます。カンマはお金の事で100,000のようにカンマを付けて表示したいということで、jun68yktさんが回答なさった方法で行きました。あと、「ナンバーフォーマット」とはどういうことですか？

m.ts10806

2018/09/02 01:09

そこは単語を知っているかどうかなので調べてもらいたいところなのですが・・・（本当に一般的な表現です）

amaryllis

2018/09/02 01:28

「javascript ナンバーフォーマット」で検索してみたら、「.toLocaleString」が出てきました。それまでに「ナンバーフォーマット」という言葉を知りませんでした。初めて知りました。

m.ts10806

2018/09/02 01:37

単語の意味を調べたいのであればJavaScriptとか言語名はつけないほうが。まあ、それでJavaScriptによるやり方も見つかるので調べ方次第では自前で解決できたようでかもしれない内容だったということね(あと似たような質問はteratailにあったはずなので)

think49

2018/09/02 01:42 編集

それが一般的かはともかく、数値を一定の書式に初期化するクラス(関数)はNumberFormatという名前で定義される事が多いようです(JavaScriptにはありません)。 http://php.net/manual/ja/function.number-format.php https://docs.oracle.com/javase/jp/8/docs/api/java/text/NumberFormat.html https://developer.android.com/reference/java/text/NumberFormat 言語によっては初期化時にオプションを付与できますが、mts10806 さんが仰っている「ナンバーフォーマット」はおそらくPHP流儀ですね。

think49

2018/09/02 02:05 編集

「JavaScriptには NumberFormat がない」と書きましたが、new Intl.NumberFormat('ja-JP', {style:'currency',currency: 'JPY'}).format(1234) がありました。国と書式をオプションで設定できます。 https://qiita.com/shisama/items/661c33fef5cbe3bb8335 MS Excelでも [通貨] に分類されていますが、Web検索の検索語は「日本通貨書式 JavaScript」が良さそうです。

m.ts10806

2018/09/02 13:32

think49さん　その関数　別質問で回答したことがあったので「一般的」としました。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

kingaku の表示をカンマ区切りにするためには、以下のように、Number.prototype.toLocaleString()を使ってみるのはいかがでしょう？ (※三項演算子を使いNaNのときに空文字列にする処理も含めました）

document.getElementById('kingaku').innerHTML = isNaN(kingaku) ? "" : kingaku.toLocaleString('ja-JP');

サンプル： https://jsfiddle.net/jun68ykt/m248kL0c/24/

コメントからご指摘の点を反映したもの： https://jsfiddle.net/jun68ykt/m248kL0c/112/

追記

テーブルを使って、以下を作成しました。

https://jsfiddle.net/jun68ykt/p2uj40xn/37/

以下補足説明です。

・0.3025という数字と、tsuboという変数名から、広さの単位の平米を坪に変換するものと解釈しました。

・また、kingaku = tsubo * se01_c で金額を求めており、sec01_c は坪単価と解釈しました。

・上記の解釈にそって、テーブルのヘッダ <th> を追加しました。

・ input のイベントハンドラは、JavaScriptのコードの中で、inputイベントに対して設定しています。

・平米数を入力する <input> では、少数点（ピリオド）も受け付けますが、50.85.のように少数点が２個あると、不正な入力と判断して背景を赤くします。

・以下、入力・表示例です。（※入力した坪単価は、これを書いている時点での東京都港区の賃貸物件の家賃相場を某サイトで調べた数字です）

以上です。
参考になれば幸いです。

追記2

データ行が複数の場合： https://jsfiddle.net/jun68ykt/p2uj40xn/43/

投稿2018/09/01 12:21

編集2018/09/02 08:18

jun68ykt

総合スコア9058

amaryllis

2018/09/01 12:31

早い回答をありがとうございます。デモを見ました。カンマが付けれてますが、私は、リアルタイムで反映したいです。つまり、 <input type="submit" value="計算" /> ↑ これ、使いません。でも、回答してくれたコードでやったらできました。できたら、フォームの｢se01_c｣をカンマを付けれますか？

jun68ykt

2018/09/01 12:49

こんにちは。 > デモを見ました。ご覧いただきありがとうございます。ご指摘の > これ、使いません。と、 > できたら、フォームの｢se01_c｣をカンマを付けれますか？について、修正したものが以下です。 https://jsfiddle.net/jun68ykt/m248kL0c/46/

jun68ykt

2018/09/01 12:57

se01_c の入力欄が一度 0 になってしまうと、入力できなくなる点を修正したものが以下です。 https://jsfiddle.net/jun68ykt/m248kL0c/48/ 　他に何かあればお知らせください。

jun68ykt

2018/09/01 13:12

ごめんなさい。正規表現に gオプションをつける必要がありました。以下がその修正版です。 https://jsfiddle.net/jun68ykt/m248kL0c/55/

jun68ykt

2018/09/01 13:42

連続コメントすみません。 se01_b のほうも入力値が変更されると自動計算するようにしたものが以下です。 https://jsfiddle.net/jun68ykt/m248kL0c/72/

jun68ykt

2018/09/01 14:45

またもや連続コメントしますが、諸点を改善したものが以下です。 https://jsfiddle.net/jun68ykt/m248kL0c/112/

amaryllis

2018/09/02 00:55

https://jsfiddle.net/jun68ykt/m248kL0c/112/ ↑ コードをそのままコピペしたけど、ダメでした。 htmlでは、テーブルタグを使っています。まあ、テーブルタグを使わず、<div>などでできることは分かってますが、今回はテーブルタグで使いたいです。 --- html --- <table> <tr> <td><input type="text" name="se01_a" value=""></td> <td><input type="text" name="se01_b" value="" id="se01_b" onfocus="price()" onkeyup="price()">○○</td> <td><span id="tsubo"></span>○○</td> <td><input type="text" name="se01_c" value="" id="se01_c" onfocus="price()" onkeyup="price()">○○</td> <td><span id="kingaku"></span> ○○</td> </tr> </table> すみませんが、よろしくお願いします。

jun68ykt

2018/09/02 02:16

そちらのテーブルを使ったサンプルを回答のほうに追記したのでご確認ください。amaryllisさんが修正中のコードにうまくお役に立てれば嬉しいです。

amaryllis

2018/09/02 07:01

jun68yktさん、ありがとうございました。ついてですが、https://teratail.com/questions/144394 回答をよろしくお願いします。

jun68ykt

2018/09/02 07:45

こんにちは。 https://teratail.com/questions/144394　を拝見しました。こちらの質問の続きなので、以下にて返答します。データ行が複数ある場合は、 (1) id として使っていた se01_b、se01_c、tsubo、 kingaku を class にする。 (2) 金額を計算する関数に、どこの行の計算をするのかが分かるように、当該行の <tr> を渡す。という感じで修正すればよいと思います。以下、その修正案です。 https://jsfiddle.net/jun68ykt/p2uj40xn/40/ なお上記を読んで、解決方法が分かったら、 https://teratail.com/questions/144394 のほうは、いずれかのご回答をベストアンサーにして閉じておかれたほうがよいでしょう。

jun68ykt

2018/09/02 07:57

上記の複数行の場合のサンプルを、回答のほうに追記2として記載しました。

jun68ykt

2018/09/02 08:02

補足ですが、複数行の場合、id ではなくクラス名にした、 "se01_a"、"se01_b"、 "se01_c" に含まれる "01" はおそらく不要になるので、たとえば "se_a"、"se_b"、 "se_c" に修正したほうがよいと思います。

jun68ykt

2018/09/02 08:17

以下、クラス名、変数名、プロパティ名から "01" を削除したバージョンです。 https://jsfiddle.net/jun68ykt/p2uj40xn/43/

amaryllis

2018/09/02 08:34

↑ ありがとうございます。ところで、https://jsfiddle.net/jun68ykt/p2uj40xn/43/ でいきました。もし、https://teratail.com/questions/144394のその②の場合は、javascriptはそのままで、その②のコードに変えても大丈夫でしょうか？

jun68ykt

2018/09/02 10:59

> javascriptはそのままで、その②のコードに変えても大丈夫でしょうか？はい。大丈夫です。 javascriptはそのままで、どのように <table> を作れるか？ということを示すサンプルを以下に作成しました。 https://github.com/jun68ykt/q144292 上記GitHubレポジトリにある　test01.html 　test02.html 　test03.html がサンプルで、これらは同じ JavaScriptファイル main.js を読み込みます。ついては、amaryllisさんの手元で上記レポジトリを git clone するか、もしくは、緑色の「clone or download」ボタンをクリックして「Download ZIP」をクリックすると、まとまったZIPファイルがダウンロードされますので、上記3点のHTMLをブラウザで開いて動作を確認してみてください。 test03.html の一番下の <table> では、坪単価の <input> を行の一番左に移動し、A地区、B地区という行と、備考の列を追加していますが、main.js のプログラムは、これらの追加には影響を受けない作りになっていることが確認できると思います。参考になれば幸いです。

amaryllis

2018/09/02 13:02

ありがとうございます。確認できました。

amaryllis

2018/09/03 04:30

jun68yktさん、気づいた点があります。 1つめは、IE系ブラウザに対応してない。 2つめは、AndroidでGoogle Chromeのブラウザで小数点入力が出来ない(坪単位入力欄)。

m.ts10806

2018/09/03 04:43

解決済みとなった質問の回答にあれこれ追記して更に回答させるのはルール違反です。自身で工夫した上で別質問にしてください。

m.ts10806

2018/09/03 04:50

jun68yktさんも作業依頼に応えるようなことはあまりされない方が良いかと（teratailの方針にも反します）