'JavaScript user input variable

n00b here!

I have managed to assemble JavaScript code and I don't understand why is not working correct.

The code is designed to calculate the difference between a given date and today's date. I guess my logic in the script is not correct as no error show in the console.

Here is the code:

function setDate(){
    let thedate = document.getElementById("startDate").value;
    if (thedate){
        document.getElementById("showinputhere").innerHTML = thedate;
    }
    else{
        document.getElementById("showinputhere").innerHTML = "No Date set";
    }
} 

let today = new Date().toISOString().slice(0, 10)

var startDate  = startDate; // Start Date 
var endDate    = today; // Today's Date
{
var diffInMs   = new Date(endDate) - new Date(startDate)
var diffInDays = diffInMs / (1000 * 60 * 60 * 24);
document.getElementById("days").innerHTML = ("Day: ") + diffInDays; // Day Counter 
var diffInWeeks = diffInMs / (1000 * 60 * 60 * 24 * 7);
document.getElementById("weeks").innerHTML = ("Week: ") + (diffInWeeks).toFixed(); // Week Counter 
if (diffInWeeks < 4) {
  stageStatus = ("<i class=\"fas fa-seedling\" ></i>  Vegetation");
} else if (diffInWeeks > 6) {
  stageStatus = "<i class=\"fas fa-pepper-hot\" ></i> Harvesting";
} else {
  stageStatus = "<i class=\"fas fa-leaf\" ></i> Flowering";
}
document.getElementById("stage").innerHTML = stageStatus;
}

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  
</head>  
<body>


<div class="card bg-secondary  border-dark m-3 mb-3" style="width: 18rem;">
<!--SET START DATE USER INPUT--> 
 <input type="date" id="startDate" ><br>
  <button onclick="setDate()">Set Date</button>
<!--SET START DATE USER INPUT END-->  

<!-- SHOW THE CHOOSEN DATE-->
<p id="showinputhere"></p>
<!-- CHOOSEN DATE END-->

<!--DISPLAY DAY & WEEK-->
<div class="card-body text-center">
 <div class="row">
   <div class="col m-auto">
    <div class="alert alert-light" role="alert"><h4><p id="days" class="mb-0"></p></h4></div>
   </div>
   <div class="col m-auto">
    <div class="alert alert-light" role="alert"><h4><p id="weeks" class="mb-0"></p></h4></div>
   </div>
  </div>
<!--DAY & WEEK END-->
   
<!--STAGE START-->
<div class="alert alert-success m-3" role="alert">
  <span class="h4"><p id="stage" class="mb-0"></p></span>
</div>  
<!--STAGE END-->
 </div>
</div>

My goal is to get the user to input the start date and from there all the magic shoud happen, unfortinanlty it only works when I hardcode the date here: var startDate = startDate; // Start Date like so:var startDate = "2022/01/01"; // Start Date

Here is the working JavaScript without user input the date:

let today = new Date().toISOString().slice(0, 10)

var startDate  = "2022/01/01"; // Start Date 
var endDate    = today; // Today's Date
{
var diffInMs   = new Date(endDate) - new Date(startDate)
var diffInDays = diffInMs / (1000 * 60 * 60 * 24);
document.getElementById("days").innerHTML = ("Day: ") + diffInDays; // Day Counter 
var diffInWeeks = diffInMs / (1000 * 60 * 60 * 24 * 7);
document.getElementById("weeks").innerHTML = ("Week: ") + (diffInWeeks).toFixed(); // Week Counter 
if (diffInWeeks < 4) {
  stageStatus = ("<i class=\"fas fa-seedling\" ></i>  Vegetation");
} else if (diffInWeeks > 6) {
  stageStatus = "<i class=\"fas fa-pepper-hot\" ></i> Harvesting";
} else {
  stageStatus = "<i class=\"fas fa-leaf\" ></i> Flowering";
}
document.getElementById("stage").innerHTML = stageStatus;
}

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  
</head>  
<body>


<div class="card bg-secondary  border-dark m-3 mb-3" style="width: 18rem;">
<!--SET START DATE USER INPUT 
 <input type="date" id="startDate" ><br>
  <button onclick="setDate()">Set Date</button>
<!--SET START DATE USER INPUT END-->  

<!--SHOW THE CHOOSEN DATE
<p id="showinputhere"></p>
 CHOOSEN DATE END-->

<!--DISPLAY DAY & WEEK-->
<div class="card-body text-center">
 <div class="row">
   <div class="col m-auto">
    <div class="alert alert-light" role="alert"><h4><p id="days" class="mb-0"></p></h4></div>
   </div>
   <div class="col m-auto">
    <div class="alert alert-light" role="alert"><h4><p id="weeks" class="mb-0"></p></h4></div>
   </div>
  </div>
<!--DAY & WEEK END-->
   
<!--STAGE START-->
<div class="alert alert-success m-3" role="alert">
  <span class="h4"><p id="stage" class="mb-0"></p></span>
</div>  
<!--STAGE END-->
 </div>
</div>

Thanks for looking

Solution 1:^[1]

function setDate(){
    let thedate = document.getElementById("startDate").value;
    if (thedate){
        document.getElementById("showinputhere").innerHTML = thedate;
    }
    else{
        document.getElementById("showinputhere").innerHTML = "No Date set";
    }
let today = new Date().toISOString().slice(0, 10)

var startDate  = thedate; // Start Date 
var endDate    = today; // Today's Date
var diffInMs   = new Date(endDate) - new Date(startDate)
var diffInDays = diffInMs / (1000 * 60 * 60 * 24);
document.getElementById("days").innerHTML = ("Day: ") + diffInDays; // Day Counter 
var diffInWeeks = diffInMs / (1000 * 60 * 60 * 24 * 7);
document.getElementById("weeks").innerHTML = ("Week: ") + (diffInWeeks).toFixed(); // Week Counter 
if (diffInWeeks < 4) {
  stageStatus = ("<i class=\"fas fa-seedling\" ></i>  Vegetation");
} else if (diffInWeeks > 6) {
  stageStatus = "<i class=\"fas fa-pepper-hot\" ></i> Harvesting";
} else {
  stageStatus = "<i class=\"fas fa-leaf\" ></i> Flowering";
}
document.getElementById("stage").innerHTML = stageStatus;

}

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  
</head>  
<body>


<div class="card bg-secondary  border-dark m-3 mb-3" style="width: 18rem;">
<!--SET START DATE USER INPUT--> 
 <input type="date" id="startDate" ><br>
  <button onclick="setDate()">Set Date</button>
<!--SET START DATE USER INPUT END-->  

<!-- SHOW THE CHOOSEN DATE-->
<p id="showinputhere"></p>
<!-- CHOOSEN DATE END-->

<!--DISPLAY DAY & WEEK-->
<div class="card-body text-center">
 <div class="row">
   <div class="col m-auto">
    <div class="alert alert-light" role="alert"><h4><p id="days" class="mb-0"></p></h4></div>
   </div>
   <div class="col m-auto">
    <div class="alert alert-light" role="alert"><h4><p id="weeks" class="mb-0"></p></h4></div>
   </div>
  </div>
<!--DAY & WEEK END-->
   
<!--STAGE START-->
<div class="alert alert-success m-3" role="alert">
  <span class="h4"><p id="stage" class="mb-0"></p></span>
</div>  
<!--STAGE END-->
 </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'JavaScript user input variable

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]