getElementsByClassNameかquerySelectorAllを使い日付の要素を取得したいです！
Q&A
Closed
解決したいこと
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 class="purchase-date"><%= item.purchase_date %></div>
</div>
<div class="sub-content">
<span>賞味期限</span>
<div class="expiration-date"><%= item.expiration_date %></div>
</div>
<div class="sub-content">
<span>残り<span class='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
0
