Receiving "Invalid Date" when attempting to get user input with JavaScript-CodePudding

So, I am trying to calculate the difference between two dates entered by the user with JavaScript; however, I keep receiving InvalidDate. Any help would be appreciated.

Here is my code:

<!DOCTYPE html>
<html>
<head>
    <title>Assignment Calculator</title>
</head>
<body>

<h1>Assignment Calculator</h1>
    
<form>
    <label for="StartDate">Date to Start:</label>
    <input id="StartDate" name="StartDate" type="date"/>

    <label for="DueDate">Due Date:</label> 
    <input id="DueDate" name="DueDate" type="date"/>
    
    <input type="submit" value="Submit" onclick="displayDates()">
</form>
    
<script type = "text/javascript" >

// Get start date and due date 

var startInput = document.getElementById("StartDate").value;
var dueInput = document.getElementById("DueDate").value;
    
var startDate = new Date(startInput);
var dueDate = new Date(dueInput);

// To calculate the time difference of two dates
var DifferenceInTime = dueDate.getTime() - startDate.getTime();

// To calculate the no. of days between two dates
var DifferenceInDays = DifferenceInTime / (1000 * 3600 * 24);

function displayDates() {
//To display the of days a student has to work on the assignment (result)
document.write("Start your assignment by "   startDate   ".<br>"
              "Finish your assignment by "   dueDate   ".<br> "
              "You must complete your assignment in this many days: "   DifferenceInDays   ".");
}
</script>

</body>
</html>

CodePudding user response：

Almost all of your javsascript code needs to move inside the displayDates() function.

When it's outside the code, it immediately runs, so variables like startInput and dueInput will be set once and never again.

Your goal is to figure out startInput and dueInput after the user clicks the button.

CodePudding user response：

You calling the function on button click but getting the value from on input field at pageload even when the data values are not selected. you should put that part too inside the function that you are calling on button click.

function displayDates() {
    var startInput = document.getElementById("StartDate").value;
var dueInput = document.getElementById("DueDate").value;
    
var startDate = new Date(startInput);
var dueDate = new Date(dueInput);

// To calculate the time difference of two dates
var DifferenceInTime = dueDate.getTime() - startDate.getTime();

// To calculate the no. of days between two dates
var DifferenceInDays = DifferenceInTime / (1000 * 3600 * 24);
//To display the of days a student has to work on the assignment (result)
document.write("Start your assignment by "   startDate   ".<br>"
              "Finish your assignment by "   dueDate   ".<br> "
              "You must complete your assignment in this many days: "   DifferenceInDays   ".");
}

CodePudding user response：

You only needs to move code, which is calculating difference between dates into displayDates function.

<!DOCTYPE html>
<html>
<head>
    <title>Assignment Calculator</title>
</head>
<body>

<h1>Assignment Calculator</h1>
    
<form>
    <label for="StartDate">Date to Start:</label>
    <input id="StartDate" name="StartDate" type="date"/>

    <label for="DueDate">Due Date:</label> 
    <input id="DueDate" name="DueDate" type="date"/>
    
    <input type="submit" value="Submit" onclick="displayDates()">
</form>
    
<script type = "text/javascript" >


function displayDates() {
    // Get start date and due date 
    var startInput = document.getElementById("StartDate").value;
    var dueInput = document.getElementById("DueDate").value;
    
    var startDate = new Date(startInput);
    var dueDate = new Date(dueInput);

    // To calculate the time difference of two dates
    var DifferenceInTime = dueDate.getTime() - startDate.getTime();

    // To calculate the no. of days between two dates
    var DifferenceInDays = DifferenceInTime / (1000 * 3600 * 24);

    //To display the of days a student has to work on the assignment (result)
    document.write("Start your assignment by "   startDate   ".<br>" 
          "Finish your assignment by "   dueDate   ".<br> "
          "You must complete your assignment in this many days: " 
          DifferenceInDays   ".");
}
</script>

</body>
</html>

CodePudding user response：

Put all the JavaScript code outside the function into the displayDates function.

<script>
function displayDates() {
// Get start date and due date 

var startInput = document.getElementById("StartDate").value;
var dueInput = document.getElementById("DueDate").value;
    
var startDate = new Date(startInput);
var dueDate = new Date(dueInput);


// To calculate the time difference of two dates
var DifferenceInTime = dueDate.getTime() - startDate.getTime();

// To calculate the no. of days between two dates
var DifferenceInDays = DifferenceInTime / (1000 * 3600 * 24);

//To display the of days a student has to work on the assignment (result)
document.write("Start your assignment by "   startDate   ".<br>"
              "Finish your assignment by "   dueDate   ".<br> "
              "You must complete your assignment in this many days: "   DifferenceInDays   ".");
}
</script>