使用輸入類型“日期”來查找兩個日期之間的時差

Question

我很好奇為什么我的代碼無法正常運行。 我從html文件中檢索Date輸入的值，並創建了一個函數來查找差異。 但是，span元素將不會更新。 請向我解釋為什么我錯了，以及如何解決該問題。 謝謝！

碼

const setup = () => {

  let firstDate = $('#firstDate').val();
  let secondDate = $('#secondDate').val();

  const findTheDifferenceBetweenTwoDates = (firstDate, secondDate) => {
    let timeDifference = Math.abs(secondDate.getTime() - 
    firstDate.getTime());

    let millisecondsInADay = (1000 * 3600 * 24);
    let differenceOfDays = Math.ceil(timeDifference / secondsInADay); 

    return differenceOfDays;
  }

 let result = findTheDifferenceBetweenTwoDates(firstDate, secondDate);

 $("span").text(result);

}

Answer 1

 $("span").text(result); 

應該替換為

$("#span").text(result);

如果span是HTML元素的ID。

Answer 2

我發現您的問題不是來自跨度的問題，而是來自javascript的問題，您應該將字符串日期解析為js new日期，並且您在secondsInADay中有一個錯字應該是millisecondsInADay

還有一個錯誤，該代碼會在文檔准備就緒時運行，這是錯誤的，因為您正在等待用戶的輸入，所以我添加了一個提交按鈕

檢查此密碼： https ：//codepen.io/hassanalisalem/pen/gGLyvJ

您的HTML

<div class="container">
  <h1>Date Difference!</h1>
  <h1>First Date</h1>
    <input id="firstDate" type ="date">
  <br/>
   <h1>Second Date</h1>
    <input id="secondDate" type ="date">
  <br>
  <h1>Amount of Days: <span id="result"></span></h1>
  <button id="submit">submit</button>
</div>

您的js：

const animateBg = (i) => {
    document.body.style.backgroundColor = 'hsl(' + i + ', 100%, 50%)';

    setTimeout(function() {
        animateBg(++i)
    }, i);
}
animateBg(0);

const setup = () => {
  let firstDate = $('#firstDate').val();
  let secondDate = $('#secondDate').val();
  const findTheDifferenceBetweenTwoDates = (firstDate, secondDate) => {
  firstDate = new Date(firstDate);
    secondDate = new Date(secondDate);

    let timeDifference = Math.abs(secondDate.getTime() - firstDate.getTime());

    let millisecondsInADay = (1000 * 3600 * 24);

    let differenceOfDays = Math.ceil(timeDifference / millisecondsInADay);

    return differenceOfDays;

  }

  let result = findTheDifferenceBetweenTwoDates(firstDate, secondDate);
  alert(result);
  $("#result").text(result);


}

$(document).ready(function () {
  $('#submit').click(function () {
    setup();
  })
});

現在應該可以在Codepen上工作了