JavaScript日期间隔计算结果无法正确显示到HTML页面问题求助

你代码中存在3处核心错误，导致计算结果无法正常渲染到页面：

• 作用域引用错误：renderPost 函数内调用 takeTheTime 时传入的 start、end 是 abc 函数的局部变量，renderPost 作用域无法访问这两个值，会直接抛出引用错误；循环遍历存储记录的 tes1 数组时，应该读取当前遍历项存储的起止日期，而非外部未定义的变量。
• DOM id重复：外层结果容器已经使用 id="pos"，循环生成的子条目div重复使用相同id，违反id全局唯一的规范，会导致DOM查询、渲染异常。
• 计算函数边界逻辑错误：takeTheTime 中如果起止日期不合法（结束日期早于/等于开始日期、日期格式无效），result 变量未赋值就进入后续计算，会返回NaN；同时单位判断顺序不合理，会导致长间隔显示错误的时间单位。

HTML部分 #

<!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>日期间隔计算</title>
</head>
<body>
  <label for="start">开始日期</label>
  <input type="date" id="start" />

  <label for="end">结束日期</label>
  <input type="date" id="end" />
  <button onclick="abc()">计算间隔</button>
  <div id="pos">
    <p>duration:</p>
  </div>
  <script src="tes.js"></script>
</body>
</html>

JS部分（tes.js） #

let tes1 = [];
function abc() {
  let start = document.getElementById('start').value;
  let end = document.getElementById('end').value;

  let blog = {
    start,
    end,
  };
  tes1.push(blog);
  renderPost();
}

function renderPost() {
  const container = document.getElementById('pos');
  // 保留固定标题
  container.innerHTML = '<p>duration:</p>';

  for (let i = 0; i < tes1.length; i++) {
    // 从当前遍历的历史记录中读取起止日期
    const { start, end } = tes1[i];
    container.innerHTML += `
      <div class="result-item">
        <p>间隔时长：${takeTheTime(start, end)}</p>
      </div>
    `;
  }
}

function takeTheTime(start, end) {
  let one = new Date(start);
  let two = new Date(end);
  
  // 前置校验日期合法性
  if (isNaN(one.getTime()) || isNaN(two.getTime()) || one >= two) {
    alert('错误：请选择合法日期，结束日期需晚于开始日期');
    return '无效日期范围';
  }

  let result = two - one;
  const msecond = 1000;
  const secInHours = 3600;
  const hoursInDay = 24;
  const dayStamp = msecond * secInHours * hoursInDay;

  let distanceInDays = Math.floor(result / dayStamp);
  let distanceInMonth = Math.floor(result / (dayStamp * 30));
  let distanceInYears = Math.floor(distanceInMonth / 12);

  // 按从大到小的顺序匹配时间单位
  if (distanceInYears >= 1) {
    return `${distanceInYears} 年`;
  } else if (distanceInMonth >= 1) {
    return `${distanceInMonth} 个月`;
  } else if (distanceInDays === 1) {
    return `${distanceInDays} 天`;
  } else {
    return `${distanceInDays} 天`;
  }
}

如果不需要保留历次计算的历史记录，可以删除 tes1 数组相关逻辑，每次点击按钮直接计算当前选择的日期间隔并渲染，代码会更简洁。

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