JavaScript user input variable-CodePudding

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  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 >
 <div >
   <div >
    <div  role="alert"><h4><p id="days" ></p></h4></div>
   </div>
   <div >
    <div  role="alert"><h4><p id="weeks" ></p></h4></div>
   </div>
  </div>
<!--DAY & WEEK END-->
   
<!--STAGE START-->
<div  role="alert">
  <span ><p id="stage" ></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  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 >
 <div >
   <div >
    <div  role="alert"><h4><p id="days" ></p></h4></div>
   </div>
   <div >
    <div  role="alert"><h4><p id="weeks" ></p></h4></div>
   </div>
  </div>
<!--DAY & WEEK END-->
   
<!--STAGE START-->
<div  role="alert">
  <span ><p id="stage" ></p></span>
</div>  
<!--STAGE END-->
 </div>
</div>

Thanks for looking

CodePudding user response：

I did some adjusts to calcule the flowering days:

document.getElementById('startDate').valueAsDate = new Date();
setDate();

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


function calcule(date) {
  var diffInMs = new Date() - new Date(date);
  var diffInDays = diffInMs / (1000 * 60 * 60 * 24);
  var labelDay = diffInDays > 2 ? "Days: " : "Day: ";
  document.getElementById("days").innerHTML = labelDay   Math.round(diffInDays * 100) / 100; // Day Counter 
  var diffInWeeks = diffInMs / (1000 * 60 * 60 * 24 * 7);
  var labelWeek = diffInDays > 2 ? "Weeks: " : "Week: ";
  document.getElementById("weeks").innerHTML = labelWeek   (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;
}

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


<div  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 >
    <div >
      <div >
        <div  role="alert">
          <h4>
            <p id="days" ></p>
          </h4>
        </div>
      </div>
      <div >
        <div  role="alert">
          <h4>
            <p id="weeks" ></p>
          </h4>
        </div>
      </div>
    </div>
    <!--DAY & WEEK END-->

    <!--STAGE START-->
    <div  role="alert">
      <span ><p id="stage" ></p></span>
    </div>
    <!--STAGE END-->
  </div>
</div>

CodePudding user response：

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  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 >
 <div >
   <div >
    <div  role="alert"><h4><p id="days" ></p></h4></div>
   </div>
   <div >
    <div  role="alert"><h4><p id="weeks" ></p></h4></div>
   </div>
  </div>
<!--DAY & WEEK END-->
   
<!--STAGE START-->
<div  role="alert">
  <span ><p id="stage" ></p></span>
</div>  
<!--STAGE END-->
 </div>
</div>