リアルタイムにカンマ(金額)を付けたい
解決済
回答 1
投稿
- 評価 -2
- クリップ 0
- VIEW 262
javascript(jQueryではない)を使って、フォームに入力時、計算された値をリアルタイムに表示するのを作っています。
function price() {
var se01_b = document.getElementById('se01_b').value;
var se01_c = document.getElementById('se01_c').value;
var tsubo = parseInt(se01_b) * 0.3025;
var kingaku = parseInt(se01_b) * 0.3025 * parseInt(se01_c);
if (isNaN(tsubo)) {
var tsubo = "";
}
if (isNaN(kingaku)) {
var kingaku = "";
}
document.getElementById('tsubo').innerHTML = tsubo;
document.getElementById('kingaku').innerHTML = kingaku;
}
上記のコードで動かすと、意図通りになり、仕上げにカンマを付けようと思っても、リアルタイムにカンマが付けれない。
どこにカンマを付けるコードはどのようなコードにすれば良いですか？
ちなみにカンマを付けるのは、｢kingaku｣の所です。
できれば、フォームの｢se01_c｣です。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+2
こんにちは。
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 21:31
早い回答をありがとうございます。
デモを見ました。
カンマが付けれてますが、私は、リアルタイムで反映したいです。
つまり、
<input type="submit" value="計算" />
↑
これ、使いません。
でも、回答してくれたコードでやったらできました。
できたら、フォームの｢se01_c｣をカンマを付けれますか？ -
2018/09/01 21:49
こんにちは。
> デモを見ました。
ご覧いただきありがとうございます。ご指摘の
> これ、使いません。
と、
> できたら、フォームの｢se01_c｣をカンマを付けれますか？
について、修正したものが以下です。
https://jsfiddle.net/jun68ykt/m248kL0c/46/ -
2018/09/01 21:57
se01_c の入力欄が一度 0 になってしまうと、入力できなくなる点を修正したものが以下です。
https://jsfiddle.net/jun68ykt/m248kL0c/48/
他に何かあればお知らせください。 -
2018/09/01 22:12
ごめんなさい。正規表現に gオプション をつける必要がありました。以下がその修正版です。
https://jsfiddle.net/jun68ykt/m248kL0c/55/ -
2018/09/01 22:42
連続コメントすみません。
se01_b のほうも入力値が変更されると自動計算するようにしたものが以下です。
https://jsfiddle.net/jun68ykt/m248kL0c/72/ -
2018/09/01 23:45
またもや連続コメントしますが、諸点を改善したものが以下です。
https://jsfiddle.net/jun68ykt/m248kL0c/112/ -
2018/09/02 09: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>
すみませんが、よろしくお願いします。 -
2018/09/02 11:16
そちらのテーブルを使ったサンプルを回答のほうに追記したのでご確認ください。amaryllisさんが修正中のコードにうまくお役に立てれば嬉しいです。 -
2018/09/02 16:01
jun68yktさん、ありがとうございました。
ついてですが、https://teratail.com/questions/144394
回答をよろしくお願いします。 -
2018/09/02 16: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
のほうは、いずれかのご回答をベストアンサーにして閉じておかれたほうがよいでしょう。 -
2018/09/02 16:57
上記の複数行の場合のサンプルを、回答のほうに追記2として記載しました。 -
2018/09/02 17:02
補足ですが、複数行の場合、id ではなくクラス名にした、 "se01_a"、"se01_b"、 "se01_c" に含まれる "01" はおそらく不要になるので、たとえば "se_a"、"se_b"、 "se_c" に修正したほうがよいと思います。 -
2018/09/02 17:17
以下、 クラス名、変数名、プロパティ名から "01" を削除したバージョンです。
https://jsfiddle.net/jun68ykt/p2uj40xn/43/ -
2018/09/02 17:34
↑
ありがとうございます。
ところで、https://jsfiddle.net/jun68ykt/p2uj40xn/43/
でいきました。
もし、https://teratail.com/questions/144394のその②の場合は、javascriptはそのままで、その②のコードに変えても大丈夫でしょうか？ -
2018/09/02 19: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 のプログラムは、これらの追加には影響を受けない作りになっていることが確認できると思います。
参考になれば幸いです。 -
2018/09/02 22:02
ありがとうございます。
確認できました。 -
2018/09/03 13:30
jun68yktさん、気づいた点があります。
1つめは、IE系ブラウザに対応してない。
2つめは、AndroidでGoogle Chromeのブラウザで小数点入力が出来ない(坪単位入力欄)。 -
2018/09/03 13:43
解決済みとなった質問の回答にあれこれ追記して更に回答させるのはルール違反です。
自身で工夫した上で別質問にしてください。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 90.72%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
mts10806
2018/09/01 22:23
リアルタイムにするにしても入力の元となるhtmlの提示がないと的確な回答にはつながりにくいかと。イベント発生のトリガーも単に「リアルタイム」だけでは正確には伝わりません。要件や前提条件を整理し、具体的に記載してください。
mts10806
2018/09/01 22:24
あとコード後の日本語が若干おかしいです。「意図通り」が何なのかこれだけではわかりませんし、「どこにカンマをつけるコードはどのように」意味不明です。もう少し伝わりやすい文章に調整していただければと思います。
mts10806
2018/09/01 22:25
一般的に「ナンバーフォーマット」という形式を表す表現がありますが、それで間違いないのでしょうか。
amaryllis
2018/09/02 10:01
回答をありがとうございます。カンマはお金の事で100,000のようにカンマを付けて表示したいということで、jun68yktさんが回答なさった方法で行きました。あと、「ナンバーフォーマット」とはどういうことですか？
mts10806
2018/09/02 10:09
そこは単語を知っているかどうかなので調べてもらいたいところなのですが・・・（本当に一般的な表現です）
amaryllis
2018/09/02 10:28
「javascript ナンバーフォーマット」で検索してみたら、「.toLocaleString」が出てきました。それまでに「ナンバーフォーマット」という言葉を知りませんでした。初めて知りました。
mts10806
2018/09/02 10:37
単語の意味を調べたいのであればJavaScriptとか言語名はつけないほうが。まあ、それでJavaScriptによるやり方も見つかるので調べ方次第では自前で解決できたようでかもしれない内容だったということね(あと似たような質問はteratailにあったはずなので)
think49
2018/09/02 10:40 編集
それが一般的かはともかく、数値を一定の書式に初期化するクラス(関数)は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 11:03 編集
「JavaScriptには NumberFormat がない」と書きましたが、new Intl.NumberFormat('ja-JP', {style:'currency',currency: 'JPY'}).format(1234) がありました。国と書式をオプションで設定できます。 https://qiita.com/shisama/items/661c33fef5cbe3bb8335 MS Excelでも [通貨] に分類されていますが、Web検索の検索語は「日本 通貨 書式 JavaScript」が良さそうです。
mts10806
2018/09/02 22:32
think49さん その関数 別質問で回答したことがあったので「一般的」としました。
2018/09/03 13:37
複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。