如何在Node.js中读取更新HTML属性值，实现工作日计算交互功能？

核心问题：Node.js是服务端运行环境，不内置浏览器的DOM API，所以你在Node.js环境下运行调用document.getElementById的代码会报错。你需要将原本运行在Node.js的计算逻辑改造为浏览器可直接运行的版本，具体步骤如下：

第一步：调整依赖引入方式 #

你不需要通过npm安装date-holidays后用require引入，直接在HTML文件中引入浏览器兼容的构建版本即可，在原HTML的</body>标签前添加以下代码：

<script src="https://cdn.jsdelivr.net/npm/date-holidays@latest/dist/date-holidays.min.js"></script>

第二步：改造原有JS逻辑 #

你可以把原有的JS代码调整后直接放在HTML的script标签中，主要修改点为：

• 移除var Holidays = require('date-holidays')语句，浏览器引入后全局已经可以直接访问Holidays对象
• 将原来硬编码的开始/结束日期改为从表单输入框读取
• 新增计算结果回写页面的逻辑
  修改后的完整JS代码如下：

var hd = new Holidays()
hd.init('KE') // 初始化肯尼亚假期规则

// 动态读取表单中的开始日期
function getFormated_StartDate(){
    const startVal = document.getElementById('start').value
    if(!startVal) return null
    var start_hol = new Date(startVal)
    var dd = String(start_hol.getDate()).padStart(2, '0')
    var mm = String(start_hol.getMonth()+1).padStart(2, '0')
    var yyy= start_hol.getFullYear()
    return new Date(mm + '/' + dd + '/' + yyy)
}

// 动态读取表单中的结束日期
function getFormated_EndDate(){
    const endVal = document.getElementById('end').value
    if(!endVal) return null
    var end_hol = new Date(endVal)
    var dd = String(end_hol.getDate()).padStart(2, '0')
    var mm = String(end_hol.getMonth()+1).padStart(2, '0')
    var yyy= end_hol.getFullYear()
    return new Date(mm + '/' + dd + '/' + yyy)
}

function getTimeDifference(){
    var a = getFormated_StartDate()
    var b = getFormated_EndDate()
    if(!a || !b) return 0
    return b.getTime() - a.getTime()
}

function getDifferenceInDays(){
    var i = getTimeDifference()
    return i / (1000 * 3600 * 24)
}

function getWeekendsAndHolidays(){
    var overall_days = 0
    var start = getFormated_StartDate()
    var end = getFormated_EndDate()
    if(!start || !end) return 0

    for (var d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
        var check_hol = hd.isHoliday(d)
        if( ( (check_hol != false) && (d.getDay() == 6 || d.getDay() == 0) ) || (check_hol != false) || (d.getDay() == 6 || d.getDay() == 0) ){
            overall_days = overall_days + 1
        }
    }
    return overall_days
}


function getSundaysAndHolidays(){
    var total_days = 0
    var Start = getFormated_StartDate()
    var End = getFormated_EndDate()
    if(!Start || !End) return 0

    for (var d = new Date(Start); d <= End; d.setDate(d.getDate() + 1)) {
        var check_hol = hd.isHoliday(d)
        if( ( (check_hol != false) && (d.getDay() == 0) ) || (check_hol != false) || ( d.getDay() == 0) ){
            total_days = total_days + 1
        }
    }
    return total_days
}

function getWorkingDaysIncludingSundays(){
    var sundaysAndHolidays = getSundaysAndHolidays()
    var DifferenceInDays = getDifferenceInDays()
    return DifferenceInDays - sundaysAndHolidays
}

function getWorkingDays(){
    var weekendsAndHolidays = getWeekendsAndHolidays()
    var differenceInDays = getDifferenceInDays()
    return differenceInDays - weekendsAndHolidays
}

// 新增：触发计算并回写结果到页面
function calculateResult() {
    const workDays = getWorkingDays()
    // 如果要展示包含周日的工作日可以替换成 getWorkingDaysIncludingSundays()
    document.getElementById('static').value = workDays
}

第三步：修改HTML触发逻辑 #

你可以选择点击按钮触发计算，也可以选择修改日期后自动计算：

• 把原按钮的onClick属性改为onClick="calculateResult()"
• 如果需要自动计算，给两个日期输入框添加onchange="calculateResult()"属性即可：

<input type="date" name="start_day" id="start" required pattern="\d{4}-\d{2}-\d{2}" onchange="calculateResult()">
<input type="date" name="end_day" id="end" required pattern="\d{4}-\d{2}-\d{2}" onchange="calculateResult()">

完成以上修改后，直接用浏览器打开HTML文件即可正常使用，无需运行Node.js服务。

内容的提问来源于stack exchange，提问作者Random User