使用输入类型“Date”查找两个日期之间的差异

Question

我很好奇为什么我的代码无法正常运行。我从HTML文件中检索Date输入的值，并创建了一个函数来查找差异;但是，span元素不会更新。请向我解释为什么我错了，我能做些什么来解决它。谢谢！

Code

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); 

如果跨度是HTML元素的ID来代替。

Answer 2

，我发现你的问题 它不是从范围，问题是从JavaScript 你应该解析字符串日期为JS新日期 你也有secondsInADay一个错字应millisecondsInADay

也有一个当文档准备的代码将运行错误 这是错误的，因为你是从用户 等待输入，所以我增加了一个提交按钮

检查这个codepin：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