有没有办法可以从节点 js 中的 html 属性读取和更新值？答案

【问题标题】：Is there a way I could read and update values from html attributes in node js?有没有办法可以从节点 js 中的 html 属性读取和更新值？
【发布时间】：2021-05-11 18:51:45
【问题描述】：

我想使用date-holidays npm 包来检查两个给定日期之间的假期，以及一个自定义函数来检查周末，然后从两个日期之间的天数中减去这两个，这样我就可以返回可用工作日数。到目前为止，我已经使用硬编码日期创建了函数，它在控制台中完美运行，但我不知道如何使用 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>

【问题讨论】：

标签： javascript html node.js jsdom

【解决方案1】：

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

要在 HTML 页面中使用 change 事件来验证服务器上的值，您需要使用新数据向服务器发送 Ajax 调用（http 网络请求）并询问服务器是否有该数据已验证。然后，您的网页将从该网页返回结果，然后可以采取相应的行动。

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

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

【讨论】：