Q&A
リアルタイムにするにしても入力の元となるhtmlの提示がないと的確な回答にはつながりにくいかと。イベント発生のトリガーも単に「リアルタイム」だけでは正確には伝わりません。要件や前提条件を整理し、具体的に記載してください。
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｣です。
あとコード後の日本語が若干おかしいです。「意図通り」が何なのかこれだけではわかりませんし、「どこにカンマをつけるコードはどのように」意味不明です。もう少し伝わりやすい文章に調整していただければと思います。
一般的に「ナンバーフォーマット」という形式を表す表現がありますが、それで間違いないのでしょうか。
回答をありがとうございます。カンマはお金の事で100,000のようにカンマを付けて表示したいということで、jun68yktさんが回答なさった方法で行きました。あと、「ナンバーフォーマット」とはどういうことですか？
そこは単語を知っているかどうかなので調べてもらいたいところなのですが・・・（本当に一般的な表現です）
「javascript ナンバーフォーマット」で検索してみたら、「.toLocaleString」が出てきました。それまでに「ナンバーフォーマット」という言葉を知りませんでした。初めて知りました。
単語の意味を調べたいのであればJavaScriptとか言語名はつけないほうが。まあ、それでJavaScriptによるやり方も見つかるので調べ方次第では自前で解決できたようでかもしれない内容だったということね(あと似たような質問はteratailにあったはずなので)
それが一般的かはともかく、数値を一定の書式に初期化するクラス(関数)は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流儀ですね。
「JavaScriptには NumberFormat がない」と書きましたが、new Intl.NumberFormat('ja-JP', {style:'currency',currency: 'JPY'}).format(1234) がありました。国と書式をオプションで設定できます。 https://qiita.com/shisama/items/661c33fef5cbe3bb8335 MS Excelでも [通貨] に分類されていますが、Web検索の検索語は「日本 通貨 書式 JavaScript」が良さそうです。
think49さん その関数 別質問で回答したことがあったので「一般的」としました。
回答1件
0
ベストアンサー
こんにちは。
kingaku の表示をカンマ区切りにするためには、以下のように、Number.prototype.toLocaleString()を使ってみるのはいかがでしょう？ (※三項演算子を使いNaNのときに空文字列にする処理も含めました）
document.getElementById('kingaku').innerHTML = isNaN(kingaku) ? "" : kingaku.toLocaleString('ja-JP');
- コメントからご指摘の点を反映したもの： 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
総合スコア9058
早い回答をありがとうございます。
デモを見ました。
カンマが付けれてますが、私は、リアルタイムで反映したいです。
つまり、
<input type="submit" value="計算" />
↑
これ、使いません。
でも、回答してくれたコードでやったらできました。
できたら、フォームの｢se01_c｣をカンマを付けれますか？
こんにちは。
> デモを見ました。
ご覧いただきありがとうございます。ご指摘の
> これ、使いません。
と、
> できたら、フォームの｢se01_c｣をカンマを付けれますか？
について、修正したものが以下です。
https://jsfiddle.net/jun68ykt/m248kL0c/46/
se01_c の入力欄が一度 0 になってしまうと、入力できなくなる点を修正したものが以下です。
https://jsfiddle.net/jun68ykt/m248kL0c/48/
他に何かあればお知らせください。
ごめんなさい。正規表現に gオプション をつける必要がありました。以下がその修正版です。
https://jsfiddle.net/jun68ykt/m248kL0c/55/
連続コメントすみません。
se01_b のほうも入力値が変更されると自動計算するようにしたものが以下です。
https://jsfiddle.net/jun68ykt/m248kL0c/72/
またもや連続コメントしますが、諸点を改善したものが以下です。
https://jsfiddle.net/jun68ykt/m248kL0c/112/
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>
すみませんが、よろしくお願いします。
そちらのテーブルを使ったサンプルを回答のほうに追記したのでご確認ください。amaryllisさんが修正中のコードにうまくお役に立てれば嬉しいです。
jun68yktさん、ありがとうございました。
ついてですが、https://teratail.com/questions/144394
回答をよろしくお願いします。
こんにちは。
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
のほうは、いずれかのご回答をベストアンサーにして閉じておかれたほうがよいでしょう。
上記の複数行の場合のサンプルを、回答のほうに追記2として記載しました。
補足ですが、複数行の場合、id ではなくクラス名にした、 "se01_a"、"se01_b"、 "se01_c" に含まれる "01" はおそらく不要になるので、たとえば "se_a"、"se_b"、 "se_c" に修正したほうがよいと思います。
以下、 クラス名、変数名、プロパティ名から "01" を削除したバージョンです。
https://jsfiddle.net/jun68ykt/p2uj40xn/43/
> 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 のプログラムは、これらの追加には影響を受けない作りになっていることが確認できると思います。
参考になれば幸いです。
ありがとうございます。
確認できました。
jun68yktさん、気づいた点があります。
1つめは、IE系ブラウザに対応してない。
2つめは、AndroidでGoogle Chromeのブラウザで小数点入力が出来ない(坪単位入力欄)。
解決済みとなった質問の回答にあれこれ追記して更に回答させるのはルール違反です。
自身で工夫した上で別質問にしてください。
jun68yktさんも作業依頼に応えるようなことはあまりされない方が良いかと（teratailの方針にも反します）
あなたの回答
tips
プレビュー
