Day类实现代码异常：网页运行仅显示空白，请求排查修复

核心问题分析 #

• 浏览器不支持Node.js模块：require('prompt-sync')()是Node.js专属的同步输入工具，浏览器原生无此API，这行代码会直接抛出错误，中断后续所有代码执行。
• 输出仅在控制台：所有结果都通过console.log输出到浏览器控制台，网页正文无任何可见内容，因此显示空白。
• 构造函数参数无默认值：new MyDay()未传入参数时，this.day和this.noOfDay初始化为undefined，虽然后续通过setter赋值，但可能引发潜在的索引计算错误。
• 日期计算逻辑错误：returnDay方法中使用%6是错误的，一周共7天，应统一用%7处理循环，多余的判断逻辑完全可以简化。

修复步骤 #

1. 替换输入方式：改用浏览器原生的prompt()函数实现同步输入，这是浏览器环境支持的标准API。
2. 添加页面输出容器：在HTML中添加<div>容器，将计算结果插入到页面可见区域，而非仅在控制台输出。
3. 完善构造函数：给构造函数参数设置默认值，避免初始状态的undefined问题。
4. 修正日期计算逻辑：简化returnDay的计算逻辑，统一用(当前索引 + 天数) % 7处理星期循环，无需额外判断。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day Class Demo</title>
    <style>
        .result-container {
            margin: 20px;
            padding: 15px;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div class="result-container" id="output"></div>

    <script type="text/javascript">    
        class MyDay{
            constructor(day = "", noOfDay = 0){
                this.weekdays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; 
                this.day = day;
                this.noOfDay = noOfDay;
            }

            set setDays(day){
                // 验证输入的日期是否合法
                if(this.weekdays.includes(day)){
                    this.day = day;
                } else {
                    throw new Error("Invalid day! Please enter a valid weekday (e.g., Sunday, Monday)");
                }
            }

            set noOfDays(param){
                // 确保天数是正整数
                const num = parseInt(param);
                if(!isNaN(num) && num >= 0){
                    this.noOfDay = num;
                } else {
                    throw new Error("Invalid number of days! Please enter a non-negative integer");
                }
            }

            get getDay(){
                return this.day;
            }

            get prevDay(){ 
                let dayIndex = this.weekdays.indexOf(this.day);
                // 处理周日的前一天是周六
                const prevIndex = dayIndex === 0 ? this.weekdays.length - 1 : dayIndex - 1;
                return this.weekdays[prevIndex];
            }

            get nextDay(){
                let dayIndex = this.weekdays.indexOf(this.day);
                // 处理周六的后一天是周日
                const nextIndex = dayIndex === this.weekdays.length - 1 ? 0 : dayIndex + 1;
                return this.weekdays[nextIndex];
            }

            get returnDay(){ 
                let dayIndex = this.weekdays.indexOf(this.day);
                // 用模7处理循环，不管加多少天都能正确计算
                const targetIndex = (dayIndex + this.noOfDay) % 7;
                return this.weekdays[targetIndex];
            }
        }

        try {
            const outputDiv = document.getElementById('output');
            let myDay = new MyDay();
            let day = prompt("Enter the day (e.g., Sunday): ");
            myDay.setDays = day;

            let result = `<p>Today is ${myDay.getDay}</p>`;
            result += `<p>The previous day is: ${myDay.prevDay}</p>`;
            result += `<p>The next day is: ${myDay.nextDay}</p>`;
            
            let noDays = prompt("Enter number of days to add: ");
            myDay.noOfDays = noDays;
            result += `<p>The day after ${noDays} days is ${myDay.returnDay}</p>`;

            outputDiv.innerHTML = result;
        } catch (error) {
            document.getElementById('output').innerHTML = `<p style="color: red;">Error: ${error.message}</p>`;
        }
    </script>
</body>
</html>

额外优化说明 #

• 添加输入验证，确保用户输入合法的星期名称和非负整数，避免无效输入导致的逻辑错误。
• 增加基础CSS样式，让页面结果更易读。
• 用try-catch捕获错误，并在页面上显示错误信息，提升用户体验。

内容的提问来源于stack exchange，提问作者Ralph Andrew Reyes