HTML内に税抜価格と税込価格をJavaScriptで計算して表示させたい

現在HTML内に表示している商品価格が[〇〇円+税]なのですが、「総額表示」の義務付けに対応するため、
[〇〇円（税込△△円）]と表示を変えたいです。
また今後消費税が上がった際に、JavaScript内の関数を変えるだけで税率がすぐに変更できるように対応しておきたいです。

<dt>価格：</dt><dd><p><span id="price">10,000</span>円（税込<span id="tax-in"></span>円）</p></dd>

<span id="price">10,000</span>のタグ内の価格（仮に10,000）をJavaScriptで税込計算（×１.１０）を行い、
<span id="tax-in">＿____</span>のタグ内に計算後（11,000）の価格を自動で表示させたいです。

上記の例だと最終的に**[価格：10,000円（税込11,000円）]**と表示させたいです。

【追記　2021.2.22】
自身の都合で削除申請を出し、再度別に投稿を行なってしまいました。(詳しくはもう一つの方に記載しております)
同じ質問があることをご了承下さい。

miyabi_pudding

2021/02/20 20:34

コードがよくわからないらないとのことですが、質問者さんが書いてみたコードはないのでしょうか？もしくは、調べたことがあるなら、どのようなキーワードで調べ、どのような参考ページを見たか、質問本文に記載して下さい。

m.ts10806

2021/02/20 22:47

>コードがよくわからないため本当に何一つ書けませんか？やりたいことはあってもやってみたこと調べたことがない、作業依頼になっています。

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

回答1件

ベストアンサー

「合計も出したいのですが…」に、１ペリカ

js
1<body>
2<dl id="hoge">
3  <dt>価格：<dd><p><span>10,000</span>円（税込<span></span>円）</p>
4  <dt>価格：<dd><p><span>12,345</span>円（税込<span></span>円）</p>
5  <dt>価格：<dd><p><span>67,890</span>円（税込<span></span>円）</p>
6  <dt>価格：<dd><p><span>99,000</span>円（税込<span></span>円）</p>
7</dl>
8
9
10<script>
11//スクリプトは</body>の直前に
12const
13  TAX = 10,
14  toNum = str => Number (str.split`,`.join``),
15  toNZP = num => num.toLocaleString (), 
16  withTax = price => toNZP (Math.round (toNum (price) * (1 + TAX / 100)));
17
18const
19  priceSpan = hoge.querySelectorAll ('dd span:first-of-type'),
20  withTaxSpan = hoge.querySelectorAll ('dd span:nth-of-type(2)'),
21  val = 'textContent';
22
23for (let i = 0, e; e = priceSpan[i]; i++)
24  withTaxSpan[i][val] = withTax (e[val]);
25
26</script>
27</body>
28