En utilisant le type d'entrée "Date" pour trouver la différence entre deux dates

Question

Je suis très curieux de savoir pourquoi mon code ne fonctionnera pas correctement. Je récupère la valeur pour l'entrée Date du fichier html et j'ai créé une fonction pour trouver la différence; cependant, l'élément span ne sera pas mis à jour. S'il vous plaît expliquez-moi pourquoi je me trompe et ce que je pourrais faire pour le réparer. Merci!

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

doit être remplacé par

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

si durée est un identifiant de l'élément HTML.

Answer 2

J'ai trouvé votre problème son pas de la durée, le problème est de javascript vous devez analyser la date de chaîne en js nouvelle date aussi vous avez une faute de frappe dans secondsInADay devrait être millisecondsInADay

aussi il y a un bug que le code sera exécuté lorsque doc est prêt cela est faux parce que vous attendez d'entrée de l'utilisateur alors j'ai ajouté un bouton d'envoi

cocher cette codepin: https://codepen.io/hassanalisalem/pen/gGLyvJ

votre 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> 

votre 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(); 
    }) 
}); 

maintenant il faut travailler il a travaillé sur codepen