按钮OnClick事件动态生成文件名：家族树网站当日事件展示需求

嘿，这个需求其实很好解决，用点简单的JavaScript就能完美实现，完全适配你拆分每日文件的思路，我给你一步步讲清楚：

核心思路就是获取当前日期的月和日，格式化成两位数字（比如0403），拼接成你约定的文件名，最后通过按钮点击触发页面跳转。

1. 先加个HTML按钮 #

在你的家族树页面里插入一个按钮，样式可以自己调整，基础代码如下：

<button id="viewTodayEvents">查看今日家族事件</button>

2. 写JavaScript逻辑实现跳转 #

接下来给按钮加点击事件，处理日期格式化和跳转逻辑：

// 获取按钮元素
const eventBtn = document.getElementById('viewTodayEvents');

// 绑定点击事件
eventBtn.addEventListener('click', function() {
  // 获取当前日期
  const today = new Date();
  // 注意：JS里月份是0-11，所以要+1后再格式化
  const formattedMonth = String(today.getMonth() + 1).padStart(2, '0');
  // 日期直接格式化两位
  const formattedDay = String(today.getDate()).padStart(2, '0');
  // 拼接成目标文件名
  const targetFile = `todayinhistory-${formattedMonth}${formattedDay}.htm`;
  
  // 两种跳转方式选一个：
  // 方式1：在当前页面打开
  window.location.href = targetFile;
  // 方式2：新开标签页打开
  // window.open(targetFile, '_blank');
});

3. 关键细节提醒 #

• padStart(2, '0')这个方法很重要，它能把单个数字的月/日补成两位，比如1月变成01，7日变成07，完美匹配你todayinhistory-0101.htm的命名规则。
• 一定要记得给月份+1，因为JavaScript的getMonth()返回的是0到11的数字，直接用会导致1月对应00，完全不对。

4. 额外优化：处理无记录的情况 #

如果有些日期还没创建对应的htm文件，可以加个简单的错误检测，避免用户跳转到404页面：

eventBtn.addEventListener('click', async function() {
  const today = new Date();
  const formattedMonth = String(today.getMonth() + 1).padStart(2, '0');
  const formattedDay = String(today.getDate()).padStart(2, '0');
  const targetFile = `todayinhistory-${formattedMonth}${formattedDay}.htm`;
  
  try {
    // 先检测文件是否存在
    const response = await fetch(targetFile);
    if (response.ok) {
      // 文件存在就跳转
      window.location.href = targetFile;
    } else {
      // 文件不存在提示用户
      alert('今日暂无家族事件记录哦');
    }
  } catch (err) {
    // 网络错误之类的情况提示
    alert('加载失败，请稍后再试');
  }
});

这样改完之后，不仅解决了之前表格加载慢的问题，用户点击按钮就能直接打开当天的家族事件页面，体验流畅多了！

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