買い物カゴの削除ボタン発火で合計金額を変更する方法について

下記htmlとJavaScriptコードにて、買い物カゴを作成しておりますが、
1点、分からないことがあります。

html
1<body>
2
3  <!-- ＊＊＊＊＊＊＊     商品メニュー始め    ＊＊＊＊＊＊＊ -->
4  <div class="contents">
5    <div class="item-wrapper item-inner">
6      <div class="item-left">
7      </div>
8      <div class="item-right">
9        <div class="item-name">
10          <h3>
11            <a href="#" id="nameEver">????????エバーグリーン18</a>
12          </h3>
13        </div>
14        <div class="item-select">
15          <select class="item" id="itemEver" tabindex="0">
16            <option value="865" selected>500g 865円</option>
17            <option value="1638">1kg 1638円</option>
18            <option value="6915">5kg 6915円</option>
19          </select>
20
21          <label for="setEver"> X
22            <select class="set" id="setEver" tabindex="0">
23              <option value="" selected>0</option>
24              <option value="1">1</option>
25              <option value="2">2</option>
26              <option value="3">3</option>
27              <option value="4">4</option>
28              <option value="5">5</option>
29            </select>
30            セット</label>
31          <button type="button" id="buyEver">カートに入れる</button>
32        </div>
33      </div>
34    </div>
35
36    <div class="item-wrapper item-inner">
37      <div class="item-left">
38      </div>
39      <div class="item-right">
40        <div class="item-name">
41          <h3>
42            <a href="#" id="nameWashed">????????トイ・スペシャル・ウォッシュド</a>
43          </h3>
44        </div>
45        <div class="item-select">
46          <select class="item" id="itemWashed" tabindex="0">
47            <option value="931" selected>500g 931円</option>
48            <option value="1764">1kg 1764円</option>
49            <option value="8035">5kg 8035円</option>
50          </select>
51
52          <label for="setWashed"> X
53            <select class="set" id="setWashed" tabindex="0">
54              <option value="" selected>0</option>
55              <option value="1">1</option>
56              <option value="2">2</option>
57              <option value="3">3</option>
58              <option value="4">4</option>
59              <option value="5">5</option>
60            </select>
61            セット</label>
62
63          <button type="button" id="buyWashed">カートに入れる</button>
64        </div>
65      </div>
66    </div>
67  <!-- ＊＊＊＊＊＊＊     商品メニュー終り    ＊＊＊＊＊＊＊ -->
68
69  <!-- ＊＊＊＊＊＊＊       税別合計始め      ＊＊＊＊＊＊＊ -->
70    <div class="item-wrapper item-inner">
71      <table class="cart" border="1" style="border-collapse: collapse">
72        <thead>
73          <tr>
74            <th colspan="4">買い物カート</th>
75          </tr>
76          <tr>
77            <th>商品名・数量・単価</th>
78            <th>セット</th>
79            <th>小計</th>
80            <th>変更</th>
81          </tr>
82        </thead>
83        <tbody id="todoList">
84
85        </tbody>
86        <tr>
87          <td colspan="2" class="text-right">税別合計</td>
88          <td class="total-box" id="exTax"></td>
89          <td></td>
90        </tr>
91      </table>
92  <!-- ＊＊＊＊＊＊＊       税別合計終り      ＊＊＊＊＊＊＊ -->
93    </div>
94  </div>
95  <script src="js/main2.js"></script>
96</body>

JavaScript
1'use strict'; {
2
3  //○○○○○○○○○○○○○   カート始め   ○○○○○○○○○○○○○
4
5  //＊＊＊＊＊  商品追加開始  ＊＊＊＊＊
6  window.addEventListener('DOMContentLoaded', () => {
7
8    const buyEver = document.getElementById('buyEver');
9    const buyWashed = document.getElementById('buyWashed');
10
11
12  //＊＊＊＊＊  商品追加関数始め  ＊＊＊＊＊
13    function addCart(nameID, itemID, setID) {
14      const name = document.getElementById(nameID);
15      const item = document.getElementById(itemID);
16      const set = document.getElementById(setID);
17
18      const nameText = name.text;
19
20      const idx = item.selectedIndex;
21      const itemName = item.options[idx].text;
22
23      const itemValue = item.value;
24
25      //▲▲▲▲　tr エレメントを新規作成(ただ生成するだけ)　▲▲▲▲
26      const taskElement = document.createElement('tr');
27
28
29      //---- td 商品名エレメントを新規作成 ----
30      const goodsElement = document.createElement('td');
31      goodsElement.classList.add('goods');
32      const setValue = set.value;
33
34
35      goodsElement.textContent = nameText;
36
37      //---- div 数量・単価エレメントを新規作成 ----
38      const unitElement = document.createElement('div');
39      unitElement.classList.add('unit');
40      unitElement.textContent = itemName;
41
42
43      //---- td qtyエレメントを新規作成 ----
44      const qtyElement = document.createElement('td');
45      qtyElement.classList.add('qty');
46      if (setValue == '') {
47        return false;
48      } else {
49        qtyElement.textContent = setValue;
50      }
51
52      //---- td subtotalエレメントを新規作成 ----
53      const subTotalElement = document.createElement('td');
54      subTotalElement.classList.add('subTotal-box');
55
56      const subTotalValue = itemValue * setValue;
57
58      subTotalElement.textContent = `${subTotalValue}円`;
59
60      addExTax(subTotalValue);
61
62
63      //---- td removeBtnエレメントを新規作成 ----
64      const removeBtnElement = document.createElement('td');
65      removeBtnElement.classList.add('amend');
66      const removeBtn = createRemoveBtn();
67      removeBtnElement.appendChild(removeBtn);
68
69      //生成したtrをtodolistにセット
70      todoList.appendChild(taskElement);
71
72      //生成したtdをtrにセット
73      taskElement.appendChild(goodsElement);
74      taskElement.appendChild(qtyElement);
75      taskElement.appendChild(subTotalElement);
76      taskElement.appendChild(removeBtnElement);
77
78      //生成したdivをtdにセット
79      goodsElement.appendChild(unitElement);
80  //＊＊＊＊＊  商品追加関数終り  ＊＊＊＊＊
81    }
82
83
84    //＊＊＊＊＊  エバーグリーン  ＊＊＊＊＊
85    buyEver.addEventListener('click', () => {
86      addCart('nameEver', 'itemEver', 'setEver');
87    });
88
89    //＊＊＊＊＊  ウォッシュド  ＊＊＊＊＊
90    buyWashed.addEventListener('click', () => {
91      addCart('nameWashed', 'itemWashed', 'setWashed');
92    });
93
94    //----------------------------------------
95    // removeBtnを生成する関数
96    // [引数]
97    //   なし
98    // [戻り値]
99    //   removeBtn：タスクを削除するボタン
100    //----------------------------------------
101    const createRemoveBtn = function() {
102      const removeBtn = document.createElement('button');
103      removeBtn.textContent = `削除`;
104
105      //●●●●　removeBtn押下時のイベントを追加　●●●●
106      removeBtn.addEventListener('click', (e) => {
107        removeBtn.parentNode.parentNode.parentNode.removeChild(removeBtn.parentNode.parentNode);
108
109        //＊＊＊＊＊  税抜合計からマイナスする関数  ＊＊＊＊＊
110        removeExTax(subTotalValue);
111
112      });
113      return removeBtn;
114    }
115
116  //＊＊＊＊＊  商品追加終了  ＊＊＊＊＊
117  });
118
119  //＊＊＊＊＊  税別合計始め  ＊＊＊＊＊
120
121  let totalExTax = 0;
122  let subTotalValue = 0;
123
124  function addExTax(price) {
125    const exTax = document.getElementById('exTax');
126    totalExTax += price;
127
128    exTax.textContent = `${totalExTax}円`;
129  }
130
131  //＊＊＊＊＊  税別合計終り  ＊＊＊＊＊
132
133  //＊＊＊＊＊  合計マイナス  ＊＊＊＊＊
134  function removeExTax(subTotalID) {
135    const exTax = document.getElementById('exTax');
136
137    totalExTax -= subTotalID;
138
139    exTax.textContent = `${totalExTax}円`;
140  }
141
142    //＊＊＊＊＊  合計マイナス  ＊＊＊＊＊
143
144
145  //○○○○○○○○○○○○○   カート終り   ○○○○○○○○○○○○○
146
147  // 'use strict'の終わり
148}
149

質問：削除ボタンをトリガーの発火点とし、税別合計から該当の小計をマイナスする方法で
税別合計の再計算をしたく思いますが、その方法が分からず、下記図の状態です。

　削除ボタンを押した時のイベントで下記を設定しております。　
removeExTax(subTotalValue);
このsubTotalValueが、該当の行の小計を拾ってくれれば税別合計も変わることは
分かりましたが、どうやって拾うのかが分かりません。

　　（この方法とは別に、小計を再度足し込む、、、方法も考えてみましたが、同様に分かりませんでした。）

大変恐縮ですが、解決の為のアドバイスを頂ければ幸いです。

t_obara

2019/10/07 05:26

手っ取り早くはグローバル変数を利用して合計金額などを保持するとか、ローカルストレージに関連情報を設定するとか、見えないDOMに設定しておいて、あらためて取得して計算するとか、でしょうか。

Nobu_Nobuta

2019/10/07 05:47

ご返信ありがとうございます。折角のアドバイスを頂いたのに申し訳ないです。それは、どのような方法なのでしょうか？

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

回答1件

自己解決

JavaScript
1      //●●●●　removeBtn押下時のイベントを追加　●●●●
2      removeBtn.addEventListener('click', (e) => {
3        removeBtn.parentNode.parentNode.parentNode.removeChild(removeBtn.parentNode.parentNode);
4
5        //＊＊＊＊＊  税抜合計からマイナスする関数  ＊＊＊＊＊
6        console.log(removeBtn.parentNode.parentNode)
7        console.log(removeBtn.parentNode.parentNode.children)
8        console.log(removeBtn.parentNode.parentNode.children[2])
9        console.log(removeBtn.parentNode.parentNode.children[2].textContent)
10
11        const subTotalText = removeBtn.parentNode.parentNode.children[2].textContent;
12        const subTotalValue = parseFloat(subTotalText);
13        console.log(subTotalValue);
14        removeExTax(subTotalValue);
15
16      });
17      return removeBtn;
18    }

    console.log(removeBtn.parentNode.parentNode)
    console.log(removeBtn.parentNode.parentNode.children)
    console.log(removeBtn.parentNode.parentNode.children[2])
    console.log(removeBtn.parentNode.parentNode.children[2].textContent)

で、それぞれ要素取得できる事が確認できました。
なので、これを定数subTotalTextと名付けました。
const subTotalText = removeBtn.parentNode.parentNode.children[2].textContent;

後は円を取っ払って文字列を数値にすれば良いので、
const subTotalValue = parseFloat(subTotalText);
console.log(subTotalValue);
としたところ、円が取っ払われて数値化出来る事が確認出来ました。

なので、これをremoveExTax()という関数に代入すれば完成です。
removeExTax(subTotalValue);

投稿2019/10/09 14:07

Nobu_Nobuta

総合スコア28