HTML/JS计算两日期相差天数报Cannot read properties of null错误如何解决

• 直接触发当前报错的核心原因：你的HTML代码中不存在ID为Difference_In_Days的元素，按钮点击事件中尝试调用document.getElementById('Difference_In_Days').value时，获取元素的结果为null，读取null的value属性就抛出了Uncaught TypeError: Cannot read properties of null (reading 'value')错误。
• 额外逻辑错误：
  1. 自定义的subtract函数前两行就写了return语句，return后的所有代码完全不会执行，无法走到日期差计算逻辑
  2. 仅传入了一个参数，无法满足两个日期的计算需求，也没有正确获取ID为start、end两个输入框的日期值
  3. 将正则校验的返回结果当成Date对象调用getTime()方法，类型不匹配会触发额外报错
  4. 计算时间差时误将变量Difference_In_Time作为函数加括号调用，属于语法错误
  5. ID为demo的元素是input标签，使用innerText赋值无法展示结果，应该修改为给value属性赋值

HTML代码 #

From Date: 
<input id="start" name="trip-start" type="date"> 
<p>
To Date:
<input id="end" name="trip-end" type="date"><p>
<button id="Subtract" onclick="document.getElementById('demo').value = subtract(document.getElementById('start').value, document.getElementById('end').value)" > Show Me Difference </button> 
<p>
<input id="demo" readonly>

JavaScript代码 #

function subtract(startStr, endStr) {
  // 校验日期是否合法
  const date1 = new Date(startStr);
  const date2 = new Date(endStr);
  if (isNaN(date1.getTime()) || isNaN(date2.getTime())) {
    return "请输入合法日期";
  }
  // 计算相差毫秒数，转天数
  const diffTime = Math.abs(date2.getTime() - date1.getTime());
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 
  return diffDays;
}

• 给日期输入框添加了type="date"属性，方便用户输入同时避免格式校验的冗余代码，也可以保留原有文本输入格式自行调整正则校验逻辑
• 修正了按钮点击事件的传参逻辑，直接传入两个日期输入框的取值
• 重写了日期计算逻辑，新增合法性校验，避免非法输入导致的报错
• 给demo输入框添加了readonly属性，避免用户手动修改计算结果

内容的提问来源于stack exchange，提问作者John Lloyd Octavio