プログラミング学習304日目 〜 自動車整備履歴アプリ修正 〜

ようやく次回オイル交換の予測日の実装ができました。
予想以上に苦労しました。

はまったことが2つありました。
1つ目は○日後の表示。
例えば10日後を表示させたいときですが、
let date =new Date();
date.setDate( date.getDate() + 10);
これで変数dateを表示させるとこんな感じになります。
Thu Nov 12 2020 00:00:00 GMT+0900 (日本標準時)

ですが、
let date =new Date();
let date1 = date.setDate( date.getDate() + 10);
これで変数date1を表示させるとこうなります。
1605020400000
意味不明の数字が表示されます。

下は代入しているだけのことなので同じ結果が出るものと思っていたのですが、どうも違うようで、これに気がつくのに時間がかかりました。

2つ目は変数がダブっていたこと。
どうしてもdateという変数を使うと動きが止まるのであれこれ調べたのですがどうもそれらしいことがなく悩んでいると、すでにdateを変数で使っていることに気が付きました。これも何気に気がつくのに時間がかかりました。1つ目はともかく、2つ目のこれはやったらあかんことで、少なくとも早く気がつくべきでした。

以下は覚え書き。

 @if (is_null($recentMileageRec->mainte_mileage))
 <p>走行距離の登録データがありません</p>
@else
<p> 登録日時<span id="recentDate" class="mrg-10">{{$recentMileageRec->mainte_date}} </span>
   走行距離<span id="recentMileage">{{number_format($recentMileageRec->mainte_mileage)}}</span>km</p>
@endif
<p> <input type="date" id="date"> 現在
走行距離<input class="right" type="number" id="mileage">km</p>

交換条件は<input class="right" type="number" name="conditionDate" id="conditionDate" value="180">日後 または <input class="right" type="number" name="conditionMileage" id="conditionMileage" value="5000">km
<p><input type="button" value="予測日を計算" onclick="changeDate()"></p>
<p>次回オイル交換は</p>
<p id="changeDate">交換予測日</p>
<script>
    'use strict'
 function changeDate(){
   //条件（日数）取得
   let conditionDate = document.getElementById('conditionDate').value;
   //条件（距離）取得
   let conditionMileage = document.getElementById('conditionMileage').value;
   //現在日付
   let date = document.getElementById('date').value;
   //現在日時 Date型
   let date1 = new Date(date);
   date1.setHours(date1.getHours() - 9); //-9で時刻を0時にする
   //現在走行距離
   let mileage = document.getElementById('mileage').value;
   //直近データ（日付）
   let recentDate = document.getElementById('recentDate').textContent;
   //現在日時 Date型
   let recentDate1 = new Date(recentDate);
   //直近データ（距離）
   let recentMileage = document.getElementById('recentMileage').textContent;
   //数値に変換
   let IntrecentMileage = Number( recentMileage.replace(/,/, '') );

   //1日あたりの走行距離
   let mileagePer1day = (mileage - IntrecentMileage) / (date1 - recentDate1) * (1000*60*60*24);
   //直近の交換日から次回交換予想日までの日数
   let daysAfter = Math.floor((conditionMileage / mileagePer1day) );
   //交換日
   recentDate1.setDate(recentDate1.getDate() + daysAfter)
   let yyyy  = recentDate1.getFullYear();
   let mm = recentDate1.getMonth();
   let dd  = recentDate1.getDate();
 document.getElementById('changeDate').textContent = ` ${yyyy}年${mm + 1}月${dd}日`Ω;
 }
</script>