getElementsByClassNameかquerySelectorAllを使い日付の要素を取得したいです！

Question

解決したいこと

RailsでWebアプリをつくっています。
購入日と賞味期限をDB上に登録し、その２つのデータの差分で残り日数を表示させたいです
追記
getElementByIdメソッドでは最初の要素しか取得されず、getElementsByClassNameメソッドを使いましたが、今度は取得自体ができなくなってしまいました。コンソールで見るとinnerHTMLが使えないみたいです。
HTMLcollectionというものでdiv要素は取得できていますが、使えるメソッドが少ないみたいで、日付が取得できるか不明です。

発生している問題・エラー

該当するソースコード

window.addEventListener('load', () => {
  const purchaseInput = document.getElementsByClassName("purchase-date");
  const expirationInput = document.getElementsByClassName("expiration-date");
  const purchaseDate = new Date(purchaseInput.innerHTML);
  const expirationDate = new Date(expirationInput.innerHTML);
  const daysLeft = document.getElementsByClassName("days-left");
  daysLeft.innerHTML = (Math.floor( (expirationDate.getTime() - purchaseDate.getTime()) / ( 1000 * 60 * 60 * 24 )));
});

<main class="main">
  <div class="inner">
    <div class="card__wrapper">
      <% @items.each do |item| %>
        <div class="content">
          <div class="image-content">
            <%= link_to image_tag(item.image.variant(resize: '200x200'), class: :card__img ), item_path(item) %>
          </div>  
          <div class="sub-content">
            <span>購入日</span>
            <div id="purchase-date"><%= item.purchase_date %></div>
          </div>
          <div class="sub-content">
            <span>賞味期限</span>
            <div id="expiration-date"><%= item.expiration_date %></div>
          </div>
          <div class="sub-content">
              <span>残り<span id='days-left'></span>日</span>
          </div>
          <div class="nickname-content">
          <%= link_to "by #{item.user.nickname}", root_path, class: :card__user %>
          </div>
        </div>
      <% end %>
    </div>
  </div>
</main>

class ItemsController < ApplicationController
  before_action :authenticate_user!
  before_action :set_item, only: [:show, :edit, :update, :destroy]
  before_action :move_to_index, only: [:edit, :update, :destroy]

  def index
    @items = Item.where(user_id: current_user.id).order("created_at DESC")
  end

  def new
    @item = Item.new
  end

  def create
    @item = Item.create(item_params)
    if @item.save
       redirect_to root_path
    else
       render :new  
    end
  end

  def show
  end

  def edit
  end

  def update
    if @item.update(item_params)
      redirect_to item_path(@item)
    else
      render :edit
    end
  end

  def destroy
    if @item.destroy
      redirect_to root_path
    else
      redirect_to root_path
    end
  end

  private
  def item_params
    params.require(:item).permit(:name, :quantity, :purchase_date, :expiration_date, :memo, :image).merge(user_id: current_user.id)
  end

  def set_item
    @item = Item.find(params[:id])
  end

  def move_to_index
    unless current_user == @item.user
      redirect_to root_path
    end
  end
end

Comments

[1T2R3M4]

https://ja.stackoverflow.com/questions/75353

以下ご対応ください。
https://teratail.com/help#posted-otherservice

[yunyun_jp]

スタックオーバーフローの方は削除しました。

Answer 1

.getDate -> .getDate()

【Date.prototype.getDate() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getDate

Comments

[yunyun_jp]

コメントありがとうございます！
()つけたのですが
まだNaNままです
まだ不十分な点があるのでしょうか？
```
window.addEventListener('load', () => {
const purchaseDate = document.getElementById("purchase-date");
const expirationDate = document.getElementById("expiration_date");
const pur = new Date(purchaseDate);
const exp = new Date(expirationDate);
const daysLeft = document.getElementById("days-left");
daysLeft.innerHTML = (Math.floor( exp.getDate() - pur.getDate() ));
});
```

[kei344]

const pur = new Date(purchaseDate.value);
(※ HTMLがINPUT要素であった場合)

[kei344]

> 検索等で来た方へ
https://teratail.com/questions/history-questions/333830
この回答は質問本文が書き換えられる前の回答です。

[yunyun_jp]

大変丁寧なご回答ありがとうございます
やはりNaNのままです
＿item.html.erb追加致しました

Answer 2

一応この方法で２つの日付の差分は解決できましたが、ただカウントダウンしていない仕様なので、現在の日付と連動して0日まで1日ずつ減っていく実装は別で考えます。

window.addEventListener('load', () => {
  const arrjsonInput = document.getElementById("arr_json");
  for (let i = 0; i < arrjsonInput.value ; i++) {
    const purchaseInput = document.getElementById("purchase-date"+i);
    const expirationInput = document.getElementById("expiration-date"+i);
    const purchaseDate = new Date(purchaseInput.innerHTML);
    const expirationDate = new Date(expirationInput.innerHTML);
    const daysLeft = document.getElementById("days-left"+i);
    daysLeft.innerHTML = (Math.floor( (expirationDate.getTime() - purchaseDate.getTime()) / ( 1000 * 60 * 60 * 24 )));
  }  
});

<main class="main">
  <div class="inner">
    <div class="card__wrapper">
    <input id="arr_json" type="hidden" value="<%= @items.length %>" class='arr_json'/>
      <% @items.each_with_index do |item, i| %>
        <div class="content">
          <div class="image-content">
            <%= link_to image_tag(item.image.variant(resize: '200x200'), class: :card__img ), item_path(item) %>
          </div>  
          <div class="sub-content">
            <span>購入日</span>
            <div id="purchase-date<%=i %>"> <%= item.purchase_date %></div>
            
          </div>
          <div class="sub-content">
            <span>賞味期限</span>
            <div id="expiration-date<%=i %>"><%= item.expiration_date %></div>
          </div>
          <div class="daysleft-content">
              <span>残り<span id="days-left<%=i %>"></span>日</span>
          </div>
          <div class="nickname-content">
          <%= link_to "by #{item.user.nickname}", root_path, class: :card__user %>
          </div>
        </div>
      <% end %>
    </div>
  </div>
</main>