Uncaught TypeError设置innerHTML为空报错 婚礼邀请函倒计时不显示

• JS脚本加载时机错误：你把<script src="main.js"></script>放在了body标签最开头，此时页面的DOM元素（比如id为days、hours的倒计时容器）还没被浏览器解析渲染，document.querySelector获取到的结果为null，调用innerHTML属性就会触发你看到的Cannot set properties of null (setting 'innerHTML')报错。
• 代码存在两处拼写错误：
  1. JS代码中hoursItem.inneraHTML = hours 属性名拼写错误，多打了字母a，正确应为innerHTML
  2. HTML代码中秒数容器的标签写为<div id="sec"a class="big-text">0</div>，id属性后多了冗余的字母a，导致JS无法正确匹配到#sec元素
• 倒计时目标日期已过期：你设置的目标日期是17 Dec 2021，当前时间晚于该日期时，时间差计算结果为负数，取整后所有数值都会显示为0。

修复步骤 #

1. 调整JS脚本的加载位置：把<script type="text/javascript" src="main.js"></script>移到</body>标签的前一行，确保DOM加载完成后再执行JS代码。也可以把所有JS代码包裹在DOMContentLoaded事件回调中，示例如下：

document.addEventListener('DOMContentLoaded', () => {
  // 将你现有的所有JS代码放在此处即可
})

2. 修正两处拼写错误：
   • JS代码中把hoursItem.inneraHTML改为hoursItem.innerHTML
   • HTML代码中把<div id="sec"a class="big-text">0</div>改为<div id="sec" class="big-text">0</div>
3. 将倒计时目标日期修改为实际婚礼日期（需为未来日期），比如2024年10月1日可写为new Date("1 Oct 2024")

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