Q&A
> 【価格：10,000円（税込11,000円）】と表示させようと試みています
現状はどのように表示されるのでしょうか？
総額表示の義務化に伴い、現在web上で**[〇〇円+税]と表示している部分を[〇〇円（税込△△円）]**と表示に変更したいです。
また、今後税率が変わった時に対応しやすくする為にJavaScriptを使用して、税率部分を変更するだけでHTML内の価格を自動で計算・表示できるようにしておきたいです。
'#price'内の数字（仮に10,000）にJavaScript側で＊1.10をし、計算結果を'#tax-in'内に表示させようとしています。。。が上手く行きません。
【価格：10,000円（税込11,000円）】と表示させようと試みていますが、【価格：10,000円（税込円）】と反映されていない状態となっております。
自身がまだJavaScriptを完璧に理解できていない為、調べながら作業を行なっており、下記のサイトを参考にして書いています。
#9 関数を使う：https://cbc-study.com/training/basic/page8#pl-4
小数点以下は切り上げたいので**Math.ceil()**を使用しています。
多分、下記の部分が間違っていると思うのですがわからないです。
$('dd').change(function(){
const num = parseInt( $('#price').val() );
どなたか教えて頂けませんでしょうか？よろしくお願い致します。
######変更前HTML
HTML
1<dt>価格：</dt><dd>10,000円 ＋ 税</dd>
######変更後HTML+JavaScript
HTML
1<dt>価格：</dt><dd><p><span id="price">10,000</span>円（税込<span id="tax-in"></span>円）</p></dd>
JavaScript
1function tax(price) { 2 const TAX = 1.10; 3 const TAXin = price * TAX; 4 return Math.ceil(TAXin); 5} 6 7$(function(){ 8 $('dd').change(function(){ 9 const num = parseInt( $('#price').val() ); 10 const t = tax(num); 11 $('#tax-in').text(t); 12 }); 13});
【追記：2021/2/21 15:20】
(質問欄の内容のコピーしたものを追記として貼っています)
重複内容の件ですが、運営側に削除申請した内容の通り、説明不足な点が多々ありご回答頂く方にご指摘を頂き、編集で全文消して新たに文章を載せて良いのか分からず再投稿させて頂きました。
またご回答頂いていたbabu_babu_baboo様が回答して頂いていたタイミングに削除申請依頼をしており、通知が来たと同時ぐらいに申請ボタンを押してしまいました。
大変不快な思いをさせてしまい、本当に申し訳ございませんでした。
今後は利用方法を再確認し、助けてもらう側の立場である自身が、回答して頂く方々への配慮を怠らないよう、慎重に利用するタイミングを見極めて活用したいと思います。
【追記：2021.2.21 17:15】
下記の質問に対しての追記です
質問を消せば履歴が消えてなくなったように見えますが、「質問を読んで考えた時間」「回答を書いた時間」は消えません。
恥ずかしい質問を消去して仕切りなおそうとする質問者の自己都合に映る回答者は多いと思います。
「質問してる内容がよく分からない」「求めてるものは全作業を求めてる内容ではないか？」と多数ご指摘を受け、回答者の方にご迷惑をおかけする質問内容を投稿してしまい、１から詳しく書き直して良いのか分からず一度削除申請をして新たに立てた方が良いのではないか？という発想になってしまいました。
しかし、ご指摘があった通り、質問内容に目を通して頂いた方の貴重なお時間まで配慮が行き届いておらず、削除申請をしてしまいました。大変申し訳ございませんでした。
今後、利用することがありましたら、質問内容を時系列で細かく記載していきたいと思います。本当に今回は度重なるご迷惑をお掛けして申し訳ございませんでした。
現在は【価格：10,000円 +税】と表示しています。
掲載されたコードでどう表示されるのかを質問しました。その結果が【価格：10,000円 +税】ですか？
申し訳ございません。
変更後のHTML+JavaScriptを使用しましたが、【価格10,000円（税込円）】と表示されており、JavaScriptが間違っているのが原因で、税込価格が反映されていないのが現状です。
既に回答が付いていますが、次回より情報は質問に追記すると回答者に分かりやすいと思います。
重複質問の内、回答済みの古い質問の削除依頼をかけているのはなぜでしょうか。
https://teratail.com/questions/323772#reply-449085
babu_babu_babooさんの回答が見えなくなっていました。
meg_様
ご指摘ありがとうございます。
文章内に追記を書いてしまいました。
今後は、1番最後の部分に【日時：追記内容】として書くようにします。
大変反省しております。申し訳ございませんでした。
think49様
重複内容の件ですが、運営側に削除申請した内容の通り、説明不足な点が多々ありご回答頂く方にご指摘を頂き、編集で全文消して新たに文章を載せて良いのか分からず再投稿させて頂きました。
またご回答頂いていたbabu_babu_baboo様が回答して頂いていたタイミングに削除申請依頼をしており、通知が来たと同時ぐらいに申請ボタンを押してしまいました。
大変不快な思いをさせてしまい、本当に申し訳ございませんでした。
今後は利用方法を再確認し、助けてもらう側の立場である自身が、回答して頂く方々への配慮を怠らないよう、慎重に利用するタイミングを見極めて活用したいと思います。
この度はthink47様、babu_babu_baboo様、誠に申し訳ございませんでした。
@hoshi_sub さん
> 編集で全文消して新たに文章を載せて良いのか分からず再投稿させて頂きました。
そこまで配慮できるのであれば、「質問を全消しして新規質問を立ててよいのか」も考慮して欲しかったところです。
質問を消せば履歴が消えてなくなったように見えますが、「質問を読んで考えた時間」「回答を書いた時間」は消えません。
恥ずかしい質問を消去して仕切りなおそうとする質問者の自己都合に映る回答者は多いと思います。
最も良いのは、古い記述を残して、新しい記述を追記日時が分かる形で追記する事です。
そうすれば、質問を読んだ回答者の時間は無駄にはならず、続けて回答可能になります。
think49様
本当におっしゃる通りだと思います。
何を聞きたいのか分からない、と多数ご指摘を頂戴した為、新たに投稿しなおした方が良いのかと言う発想になってしまいました。
自身の質問内容を全部目を通してご指摘頂いた方の貴重な時間を無駄にするような行為だったと思います。
>恥ずかしい質問を消去して仕切りなおそうとする質問者の自己都合に映る回答者は多いと思います。
と言う考えではないことだけはご理解頂ければ幸いです。
今後もし利用する機会があった場合は、時系列で細かく並べて記載していければと思います。
回答2件
0
ベストアンサー
js
1 2<body> 3<dl id="hoge"> 4 <dt>価格：<dd><p><span>10,000</span>円（税込<span></span>円）</p> 5 <dt>価格：<dd><p><span>12,345</span>円（税込<span></span>円）</p> 6 <dt>価格：<dd><p><span>67,890</span>円（税込<span></span>円）</p> 7 <dt>価格：<dd><p><span>99,000</span>円（税込<span></span>円）</p> 8</dl> 9 10 11<script> 12//スクリプトは</body>の直前に 13const 14 TAX = 10, 15 toNum = str => Number (str.split`,`.join``), 16 toNZP = num => num.toLocaleString (), 17 withTax = price => toNZP (Math.round (toNum (price) * (1 + TAX / 100))); 18 19const 20 priceSpan = hoge.querySelectorAll ('dd span:first-of-type'), 21 withTaxSpan = hoge.querySelectorAll ('dd span:nth-of-type(2)'), 22 val = 'textContent'; 23 24for (let i = 0, e; e = priceSpan[i]; i++) 25 withTaxSpan[i][val] = withTax (e[val]); 26 27</script> 28</body> 29
投稿2021/02/21 05:08
総合スコア616
babu_babu_baboo様
午前中にご回答頂いていたのにも関わらず、当方の都合で削除申請をしてしまい、不快な思いをさせてしまい誠に申し訳ございませんでした。
大変分かりやすいご回答ありがとうございます。
戻り次第早速試してみたいと思います。
@babu_babu_baboo さん
重複質問の回答と同じコードでしょうか。
コードを読みたいと思っていたので、念のため確認を…。
同じですよ。
突っ込まれそうなとこ無いでしょ？
なんなら１行で…
> 突っ込まれそうなとこ無いでしょ？
ここがTAGIndexなら、
「属性の存在しない <span> はセマンティクス的に好ましくありません。id/class属性などを付けるべきです。」
と指摘されたかもしれません。
また、消費税の端数計算は事業者判断なので、四捨五入(Math.round)で良いか、質問者を通じて事業者確認が必要な点に注意が必要と思います。
https://www.mof.go.jp/tax_policy/summary/consumption/a_001.htm#9
質問文のコードでは切り上げ(Math.ceil)を採用しているようですね。
納税額重視なのでしょうか。
> なんなら１行で…
切捨てver
https://jsfiddle.net/ysqx29fz/
console.log(Math.ceil (99000*1.1), Math.round (99000*1.1));
// 108901, 108900
端数処理が面倒で安易に Math.round にしてしまった。
あ～除算は最後にしないとダメだったよね。
--
think49 さん
ただ１行で書ければ好いのではない。普通すぎて面白くな～い！
これ未満は無理だべ！
[...hoge.querySelectorAll('dd span')].reduce((a,b,i,_,v='textContent')=>i&1?(b[v]=a.toLocaleString(),0):Math.ceil(+(b[v].replace(/,/g,''))*11/10),0);
--
hoshi_sub さん
不快な思いはありませんよ。たかだか構想に数秒、コーディングに数分程度。藁にもすがる思いの人にとっては、やんや**2言われたら凹むよね～。
@babu_babu_baboo さん
パフォーマンス重視の書き味だと「普通」(正攻法)に落ち着く事が多いんですよね…。
> v='textContent')=>i&1?
i&1 の部分、span要素が4個以上存在する時に誤爆してしまいます。
属性の存在しない <span> は「変更に弱い」という実用上の問題があります。
セマンティクスを重視する理由はそこだと思ってます。
サンプル故に労力(完成度)を抑えているのは分かっていますが、 TAGIndexでは妥協を許さず、指摘されていたのが印象に残ってます。
そういう場、今でもどこかにないですかねえ…。
console.log([...Array(10).keys()].map (i=>i&1));
// Array(10) [ 0, 1, 0, 1, 0, 1, 0, 1, 0, 1 ]
返す値は0～１なのだから誤爆してない！
--
パーフォーマンス？
短さはナニを除いて俺の美学！
--
＞どこかにないか？
そんなんの作れ！
俺は会員第一号になる！
まぁ俺はネタ（問題）を興す役だけど…
> // Array(10) [ 0, 1, 0, 1, 0, 1, 0, 1, 0, 1 ]
index2-3,4-5...にも組み合わせが発生する事になりませんか。
https://jsfiddle.net/18gh9c67/
ミニマムコードに勝手に span 付け足しておいてそれは…
'dd span:nth-of-type(-n+2)'
これでお茶を濁す。
babu_babu_baboo様
早速試してみたところ自身がやりたかった表示がされました。
おっしゃっていた通り、色々と検索し調べているうちにだんだん分からなくなり、頭の中が混乱していましい、藁にもすがる思いでした。
本当にありがとうございました。
@babu_babu_baboo さん
> １ミニマムコードに勝手に span 付け足しておいてそれは…
意地悪で指摘したつもりはなかったのですが、元々、0/1判定だったのが奇数/偶数判定に変更されていたのが指摘のきっかけでした。
https://jsfiddle.net/fxvdpcn9/
セマンティクスに触れたのはclass名を付ければ、JavaScript改修の必要なく、HTMLコンテンツを変更可能な幅が広くなり、汎用性が上がる為です。
https://jsfiddle.net/fxvdpcn9/1/
次のツッコミ先を用意しておきましたぜ！（連動するプルダウンメニューと…
0
$('セレクター').val()は、input要素など、value属性を持つ要素にのみ適用できます。
なので、span要素には使えません。
また、changeイベントも起動することができません。
（同様に、起動できる要素とできない要素がある）
なので、イベント起動ではなく、そのままストレートに処理を実行してしまうのがいいかと思います。
jQueryにて、要素のテキストを取得するには、textメソッドを使います。
javascript
1$(function(){ 2 const reg = /,/g; 3 const num = parseInt( $('#price').text().replace(reg, '') ); 4 const t = tax(num); 5 $('#tax-in').text(t); 6 7});
投稿2021/02/21 04:46
編集2021/02/21 09:06
総合スコア9555
そもそもddにchangeイベントが起こらないのでは。
あ・・・・。
ご指摘ありがとうございます。
回答修正します。
miyabi_takatsuk様
なるほどですね…！
その辺りがイマイチ分からずのまま質問してしまいました。
もっと勉強していきます。
貴重なお時間を頂戴してしまい申し訳ございませんでした。
> const num = parseInt( $('#price').text() );
4桁以上の価格をparseIntした時に価格が見切れてしまいますね。
console.log(parseInt('1,000円')); // 1
※カンマを取り除く処理は過去質問で回答されていますが、質問のコードには生かされていないようです。
https://teratail.com/questions/278135
あぁ、なるほどです・・・。
ソースコード修正していきます。
あなたの回答
tips
プレビュー
