質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

Q&A

解決済

1回答

1755閲覧

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

Nobu_Nobuta

総合スコア28

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

0グッド

1クリップ

投稿2019/10/07 02:53

編集2019/10/07 08:17

下記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が、該当の行の小計を拾ってくれれば税別合計も変わることは
分かりましたが、どうやって拾うのかが分かりません。

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

t_obara

2019/10/07 05:26

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

2019/10/07 05:47

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

回答1

0

自己解決

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 }

parentNodeからアプローチ

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問