ボタンを押した時に値が加算されもう一度押した時に加算した値を引きたい

ボタンを押したら、その値を加算し、もう一度同じボタンを押したら加算された分だけ引くプログラムを作成したいです。

加算は正常に行われるのですが、引き算が上手くいかず、NaNになってしまいます。
原因はどこにあるのでしょうか？

今回は、5000が加算されるボタンを押して、また同じボタンを押しています。

HTML
1<div class="center fixed_cost"><span class="sum">0</span>円</div>
2
3        <div class="container">
4          <button type="button" class="buttons">家賃<br>
5            <span class="costs">80,000</span>円
6          </button>
7          <button type="button" class="buttons">光熱費<br>
8            <span class="costs">5,000</span>円
9          </button>
10          <button type="button" class="buttons">水道代<br>
11            <span class="costs">5,000</span>円
12          </button>
13以下省略

JavaScript
1// ボタンが押された時の表示を変更
2function Click() {
3    let btns = document.getElementsByClassName('buttons');
4    let costs = document.getElementsByClassName('costs');
5    let totalArr = [];
6    let flag = [];
7
8    for (let i = 0; i < btns.length; i++) {
9        btns[i].addEventListener('click', () => {
10            // CSSの表示変更
11            btns[i].classList.toggle('clicked');
12
13            if (btns[i].classList.contains('clicked') == true) {
14
15                // 1,000などを1000にする
16                let cost = costs[i].innerHTML;
17                let convert = cost.replace(',', '');
18
19                totalArr.push(Number(convert));
20                flag[i] = 1;
21
22                console.log(`配列の中身：${totalArr}`);
23                console.log(`フラグ：${flag}`);
24            } else {
25                flag[i] = 0;
26                if (flag[i] === 0) {
27                    totalArr[i] -= totalArr[i];
28                }
29
30                console.log(`配列の中身：${totalArr}`);
31                console.log(`フラグ：${flag}`);
32            }
33
34            // 合計値を表示
35            let sum = document.querySelector('.sum');
36            let total = totalArr.reduce((total, score) => {
37                return total + score;
38            }, 0);
39            
40            console.log(`合計：${total}`);
41        });
42    }
43}

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

回答2件

自己解決

JavaScript
1else {
2       flag[i] = 0;
3       if (flag[i] === 0) {
4       totalArr[i] -= totalArr[i];
5     }
6

ここの部分で、totalArrは["5,000"]のようにコンマが入っているため計算できないのだと判明しました。

投稿2020/08/30 06:33

gyoruo

総合スコア61

カスタムデータとか有効かもしれません

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const sum=document.querySelector('.sum');
4  document.querySelectorAll('.buttons').forEach(x=>{
5    x.dataset['val']=x.querySelector('.costs').textContent.replace(",","");
6    x.addEventListener('click',()=>{
7      var val=parseInt(x.dataset['val']);
8      sum.textContent=(parseInt(sum.textContent.replace(",",""))+val).toLocaleString();
9      x.dataset['val']=-val;
10    });
11  });
12});
13</script>
14
15<div class="center fixed_cost"><span class="sum">0</span>円</div>
16<div class="container">
17<button type="button" class="buttons">家賃<br>
18<span class="costs">80,000</span>円
19</button>
20<button type="button" class="buttons">光熱費<br>
21<span class="costs">5,000</span>円
22</button>
23<button type="button" class="buttons">水道代<br>
24<span class="costs">5,000</span>円
25</button>