JavaScript 用户输入变量

【问题标题】：JavaScript user input variableJavaScript 用户输入变量
【发布时间】：2022-02-05 00:30:58
【问题描述】：

n00b 在这里！

我已经设法组装了 JavaScript 代码，但我不明白为什么不能正常工作。

该代码旨在计算给定日期与今天日期之间的差异。我想我在脚本中的逻辑不正确，因为控制台中没有显示错误。

代码如下：

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>

我的目标是让用户输入开始日期，然后所有的魔法都应该从那里发生，不幸的是它只有在我在这里硬编码日期时才有效：var startDate = startDate; // Start Date 像这样：var startDate = "2022/01/01"; // Start Date

这是没有用户输入日期的工作 JavaScript：

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>

感谢观看

【问题讨论】：

  • 这里正确的调试步骤是获取这两个值并查看将它们转换为日期时会发生什么，然后进行计算直到找到 NaN（您应该立即找到它，从而使这个问题中的大部分代码不是必需的）

标签： javascript html ajax


【解决方案1】：

我做了一些调整来计算开花天数：

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

function calcule() {
  let date = document.getElementById("startDate").value;
  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 class="card bg-secondary  border-dark m-3 mb-3" style="width: 18rem;">
  <!--SET START DATE USER INPUT-->
  <input type="date" id="startDate" onchange="calcule()"><br>

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

【讨论】：

    【解决方案2】： 

    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>

    【讨论】：

    • 没有意识到 startDate 超出了您的功能块，您还必须将 thedate 传递给 startDate
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-12-06
    • 1970-01-01
    • 2015-05-28
    • 2018-12-29
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode