格納した値がNaNになってしまう

Question

ボタンが押された時に値を配列に格納し、もう一度ボタンが押されたら押されたボタンの値を取り除く処理を行いたいのですが、格納するとNaNになり、もう一度ボタンを押すとcost is not definedとエラー表示されます。
どこが原因なのかアドバイスをお願い致します。
格納する時に後からreduceで数値計算するため、Numberでキャストしています。

<div class="container">
          <button type="button" class="buttons">家賃<br>
            <span class="costs">80,000</span>円
          </button>
          <button type="button" class="buttons">光熱費<br>
            <span class="costs">5,000</span>円
          </button>
          <button type="button" class="buttons">水道代<br>
            <span class="costs">5,000</span>円
          </button>
// 以下省略

let btns = document.getElementsByClassName('buttons');
    let costs = document.getElementsByClassName('costs');
    let totalArr = [];

    for (let i = 0; i < btns.length; i++) {
        btns[i].addEventListener('click', () => {
            btns[i].classList.toggle('clicked');

            // ボタンが押された場合の計算用配列の処理
            if (btns[i].classList.contains('clicked') == true) {
                let cost = costs[i].innerHTML;
                totalArr.push(Number(cost));
                console.log(totalArr);
            } 
            else {
                totalArr.pop(Number(cost));
                console.log(totalArr);
            }
        });
    }

Answer 1

どこが原因なのか

エラーは、メッセージだけでなく発生箇所も教えてくれます。
メッセージ cost is not defined に続く at (filename):(row):(col) がそう。
エラー文は簡潔ながらも重要なヒントを示してくれています。

ご質問コードの原因となりそうな箇所にコメントしてみました（桁揃えしています）。

let btns = document.getElementsByClassName('buttons');
let costs = document.getElementsByClassName('costs');
let totalArr = [];

for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener('click', () => {
    btns[i].classList.toggle('clicked');

    // ボタンが押された場合の計算用配列の処理
    if (btns[i].classList.contains('clicked') == true) {
      let cost = costs[i].innerHTML; // cost は if 文の真となるブロックでのみ有効
      totalArr.push(Number(cost));
      console.log(totalArr);
    } 
    else {
      totalArr.pop(Number(cost)); // スコープ内にcost がないので、ここでエラー
      console.log(totalArr);
    }
  });
}

reduceで数値計算するため、Numberでキャスト

事前にキャストしなくても reduce() のコールバックで処理することもできます。

let total = ["80,000","5,000","5,000"]
  .reduce((a,s)=>{
    a+=s.replace(/,/g,"")|0;
    return a;
  }, 0);
console.log( total ); // 90000

totalArr には条件を満たす値だけを格納（push）し、それ以外はなにもしない。
という方法であれば、 if else で表記された処理も if だけで済みます。

Comments

[gyoruo]

ご回答ありがとうございます。
なんだか初心者には難しそうですが、頑張って理解してみます！

Answer 2

80,000のように、数値にカンマが含まれているのでNumberによるキャストに失敗してNaNが返されています。

もう一度ボタンを押したときにcost is not definedとなるのは、elst句の中で変数costが定義されていないためです。

さらに、popは配列の最後の要素を取り除くメソッドであるので、引数を指定することはできません。

Array.prototype.pop() - JavaScript - MDN Web Docs - Mozilla

Comments

[gyoruo]

色々とアドバイスありがとうございます！
取り除く時にspliceなどを用いて頑張ってみます！