配列の中身を取り出したい

Question

配列の中身を取り出そうとしたら、なぜかundefinedになってしまいます。なぜでしょうか？
私の考えでは、1番最初にclass="costs"が書かれている値の80,000がcostに入って表示されると思ってました。

<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>
          <button type="button" class="buttons">通信費<br>
            <span class="costs">5,000</span>円
          </button>
          <button type="button" class="buttons">食費<br>
            <span class="costs">40,000</span>円
          </button>
          <button type="button" class="buttons">音楽<br>
            <span class="costs">1,000</span>円
          </button>
          <button type="button" class="buttons">動画<br>
            <span class="costs">2,000</span>円
          </button>
          <button type="button" class="buttons">Office関連<br>
            <span class="costs">1,000</span>円
          </button>
        </div>

let costs = document.getElementsByClassName('costs');
let cost = costs.innerHTML;
console.log(cost);

Answer 1

let cost = costs[0].innerHTML;

とすれば80,000が取り出せます

Comments

[gyoruo]

ご回答ありがとうございます！
index番号を指定しないといけなかったんですね。