JavaScript 用戶輸入變量
[英]JavaScript user input variable
問題描述
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 = startDate; // Start Date如下： var startDate = "2022/01/01"; // 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>
感謝您的關注
2 個解決方案
解決方案1
0 2022-02-03 23:08:34
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>
解決方案2
0 2022-02-03 23:34:51
我做了一些調整來計算開花天數：
calcule(new Date()); 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 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>
當用戶在javascript中鍵入變量時，將用戶輸入存儲到變量中
[英]storing user input to a variable as user is typing it in javascript
Javascript - 用戶通過HTML輸入標簽輸入來設置Javascript變量？
[英]Javascript - User input through HTML input tag to set a Javascript variable?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.