iOS上でjavascriptが一部だけNaNの値を返します
Q&A
Closed
解決したいこと
PCのブラウザ（Chrome、Safari）では正しく残り日数が表示されるのですが、iPhone12Pro上（Chrome、Safari、Brave)のブラウザではトップページの表示はされるのですが、詳細画面で正しく表示されません。（下記画像参照）
Android端末等、他の環境では確認しておりません。
何が原因でしょうか？
発生している問題・エラー
該当するソースコード
正しく表示される
window.addEventListener('load', () => {
const arrjsonInput = document.getElementById("arr_json");
for (let i = 0; i < arrjsonInput.value ; i++) {
const expirationInput = document.getElementById("expiration-date"+i);
const today = new Date();
const expirationDate = new Date(expirationInput.innerHTML);
const daysLeft = document.getElementById("days-left"+i);
daysLeft.innerHTML = (Math.round( (expirationDate.getTime() - today.getTime()) / ( 1000 * 60 * 60 * 24 )));
if (daysLeft.innerHTML <= 0) {
const deadLine = document.getElementById("dead-line"+i);
deadLine.setAttribute("style", "color:#7945F5;text-decoration:underline #7945F5;");
daysLeft.setAttribute("style", "color:#7945F5;text-decoration:underline #7945F5;");
};
};
});
NaNと表示される↓
window.addEventListener('load', () => {
const expirationInput = document.getElementById("expiration_date");
const today = new Date();
const expirationDate = new Date(expirationInput.innerHTML);
const daysLeft = document.getElementById("days_left");
daysLeft.innerHTML = (Math.ceil( (expirationDate.getTime() - today.getTime()) / ( 1000 * 60 * 60 * 24 )));
if (daysLeft.innerHTML <= 0) {
const deadLine = document.getElementById("dead_line");
deadLine.setAttribute("style", "color:#7945F5;text-decoration:underline #7945F5;");
daysLeft.setAttribute("style", "color:#7945F5;text-decoration:underline #7945F5;");
};
});
show.html.erb
<% if user_signed_in? && current_user.id == @item.user_id %>
<div class="item-manage">
<%= link_to "編集", edit_item_path(@item), class: :item__btn %>
<%= link_to "削除", item_path(@item), method: :delete, class: :item__btn %>
</div>
<% end %>
<div class="item_block">
<div class="item_card">
<div class="image-content">
<%= link_to image_tag(@item.image.variant(resize: '200x200'), class: :card__img ) %>
</div>
<div class="daysleft-detail">
<span id="dead_line">残り<span id="days_left"></span>日</span>
</div>
<div class="item-detail">
<p class="detail__title">名前</p>
<p class="detail__message">
<%= @item.name %>
</p>
</div>
<div class="item-detail">
<p class="detail__title">数量</p>
<p class="detail__message">
<%= @item.quantity %>
</p>
</div>
<div class="item-detail">
<p class="detail__title">購入日</p>
<p id="purchase_date">
<%= @item.purchase_date %>
</p>
</div>
<div class="item-detail">
<p class="detail__title">賞味期限</p>
<p id="expiration_date">
<%= @item.expiration_date %>
</p>
</div>
<% if @item.memo.present? %>
<div class="item-detail">
<p class="detail__title">メモ</p>
<p class="detail__message">
<%= @item.memo %>
</p>
</div>
<% end %>
<div class="nickname-content">
<%= "by #{@item.user.nickname}" %>
</div>
自分で試したこと
問題は-かなと思いましたが、replaceの使い方もよくわかりませんでした。
var dt = new Date(at.replace(/([\+|\-])([0-9]{2})([0-9]{2})$/,"$1$2:$3"));
now=new Date(d.replace(/-/g,"/"));
0
