有没有一种方法可以读取和更新nodejs中html属性的值



我想使用date-holidaysnpm包来检查两个给定日期之间的假期,还想使用一个自定义函数来检查周末,然后从两个日期之间的天数中减去这两个,这样我就可以返回可用的工作日数。到目前为止,我已经使用硬编码日期创建了函数,它在控制台中运行得很好,但我不知道如何使用onchange()从HTML文件中读取日期值,并使用它们来获取剩余天数,然后在提交表单之前在HTML页面上更新剩余天数的值。我尝试使用document.getElementbyId(),但发现node.js不支持DOM。我该怎么绕过这个?

代码:

var Holidays = require('date-holidays')
var hd = new Holidays()
var countries = hd.getCountries() // get supported countries
hd.init('KE')                     // get kenyan Holidays for the current year

function getFormated_StartDate(){
var start_hol = new Date("11/30/2021");
var dd = String(start_hol.getDate()).padStart(2, '0');
var mm = String(start_hol.getMonth()+1).padStart(2, '0');
var yyy= start_hol.getFullYear();
start_hol = new Date(mm + '/' + dd + '/' + yyy);
return start_hol;
}
function getFormated_EndDate(){
var end_hol = new Date("12/28/2021");
var dd = String(end_hol.getDate()).padStart(2, '0');
var mm = String(end_hol.getMonth()+1).padStart(2, '0');
var yyy= end_hol.getFullYear();
end_hol = new Date(mm + '/' + dd + '/' + yyy);
return end_hol;
}
function getTimeDifference(){
var a = getFormated_StartDate();
var b = getFormated_EndDate();
var Diff_in_tym = b.getTime() - a.getTime();
return Diff_in_tym;
}
function getDifferenceInDays(){
var i = getTimeDifference();
var Diff_in_days = i / (1000 * 3600 * 24);
return Diff_in_days;
}
function getWeekendsAndHolidays(){
var overall_days = 0;
var start = getFormated_StartDate();
var end = getFormated_EndDate();
for (var d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
var check_hol = hd.isHoliday(d);
//                        both                               ||        holiday_only       ||              weekend_only
if( ( (check_hol != false) && (d.getDay() == 6 || d.getDay() == 0) ) || (check_hol != false) || (d.getDay() == 6 || d.getDay() == 0) ){
overall_days = overall_days + 1;
// console.log(d.toDateString());
}
}
return overall_days;
}

function getSundaysAndHolidays(){
var total_days = 0;
var Start = getFormated_StartDate();
var End = getFormated_EndDate();
for (var d = new Date(Start); d <= End; d.setDate(d.getDate() + 1)) {
var check_hol = hd.isHoliday(d);
//                        both                  ||        holiday_only       ||    sundays_only
if( ( (check_hol != false) && (d.getDay() == 0) ) || (check_hol != false) || ( d.getDay() == 0) ){
total_days = total_days + 1;
// console.log(d.toDateString());
}
}
return total_days;
}
function getWorkingDaysIncludingSundays(){
var sundaysAndHolidays = getSundaysAndHolidays();
var DifferenceInDays = getDifferenceInDays();
var workingDaysIncludingSundays = DifferenceInDays - sundaysAndHolidays;
return workingDaysIncludingSundays;
}
function getWorkingDays(){
var weekendsAndHolidays = getWeekendsAndHolidays();
var differenceInDays = getDifferenceInDays();
var workingDays = differenceInDays - weekendsAndHolidays;
return workingDays;
}

var z = getWorkingDays();
var Z = getWorkingDaysIncludingSundays();
console.log(z + "n" + Z);
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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="./redefine.js"></script>
<title>Hello, world!</title>
</head>
<body>

<h3 class="container display-5">
<p class="text-info">Working Days </p> 
</h3>
<h3></h3>
<section class="container" style="padding-top: 5%; padding-left: 5%;">


<form NAME="myForm" Action="" METHOD="GET" >
<div class="form-row">
<label for="start_day" class="form-group">Enter the Start Date: <br>
<input type="date" name="start_day" id="start" required pattern="d{4}-d{2}-d{2}"> <br>
<span class="validity"></span>
</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label for="end_day" class="form-group">Enter the End Date:<br>
<input type="date" name="end_day" id="end" required pattern="d{4}-d{2}-d{2}"><br>
<span class="validity"></span>
</label>
</div>


<button type="button" class="btn btn-primary" NAME="button" Value="Calculate" onClick="getWorkingDays(this.form)">
Calculate</button>
<br>
<br>
<div class="form-group row">
<label for="results" class="col-sm-2 col-form-label">Available workdays :</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="static" value="0">        
</div>
</div>

</form>
</section>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

所以,听起来你不明白你的nodejs服务器在一个完全独立的网络和计算机中运行,与HTML页面及其在浏览器中运行的Javascript(在最终用户的计算机上(完全不同。两者完全分离。这就是所谓的客户端/服务器体系结构。服务器无法直接访问浏览器中正在运行的HTML页面。

要使用HTML页面中的change事件来验证服务器上的值,您需要向服务器发送一个Ajax调用(http网络请求(,其中包含新数据,并询问服务器该数据是否有效。然后,您的网页将从该网页获取结果,然后可以采取相应的行动。

为了支持这个特定验证调用的Ajax调用,您需要在nodejs服务器上创建一个专门用于此操作的新路由。


或者,如果您想在change事件中执行的操作不需要与服务器对话,那么您可以直接将Javascript添加到您的网页中,从change事件中获取新值,然后(完全在网页中(决定您想在当前网页中执行哪些修改或检查。

最新更新