JS/HTML新手求助：添加document.getElementById后出现Cannot set properties of null错误

我是JS/HTML新手，项目快完成时，添加document.getElementById相关代码后出现了Cannot set properties of null错误。控制台错误截图如下：

我的代码如下：

处理预订座位的循环代码 #

for(const key1 in reservedSeats){
    if(reservedSeats.hasOwnProperty(key1)){

        const obj=reservedSeats[key1];
        console.log(obj.seat)//checking to see if it returns the seat number
    
        document.getElementById(obj.seat).className="r";
        document.getElementById(obj.seat).innerHTML='R';
    }
}

预订座位数据对象 #

var reservedSeats = {
    record1: {
        seat: "b19",
        owner: {
            fname: "Joe",
            lname: "Smith"
        }
    },
    record2: {
        seat: "b20",
        owner: {
            fname: "Joe",
            lname: "Smith"
        }
    },
    record3: {
        seat: "b21",
        owner: {
            fname: "Joe",
            lname: "Smith"
        }
    },
    record4: {
        seat: "b22",
        owner: {
            fname: "Joe",
            lname: "Smith"
        }
    }
};

我已经查阅过Stack Overflow相关帖子，尝试将reservedSeats对象放在DOM操作代码上方，但问题仍未解决。

解决方法 #

这个错误的核心是document.getElementById(obj.seat)返回了null，即页面中不存在对应ID的元素。按以下优先级排查解决：

• 确认HTML元素ID完全匹配
  检查HTML代码，确保存在id="b19"、id="b20"等完全一致的元素（ID区分大小写，B19和b19会被视为不同ID）。

• 确保DOM加载完成后执行JS
  即使数据对象放在代码上方，如果JS在DOM元素渲染前执行，依然会找不到元素。推荐三种实现方式：

  1. 将JS代码放在HTML的</body>标签末尾，等待所有DOM元素加载完成后再运行；
  2. 用DOMContentLoaded事件包裹代码：

     document.addEventListener('DOMContentLoaded', function() {
         for(const key1 in reservedSeats){
             if(reservedSeats.hasOwnProperty(key1)){
                 const obj = reservedSeats[key1];
                 const seatElement = document.getElementById(obj.seat);
                 // 增加空值判断，避免找不到元素时崩溃
                 if(seatElement) {
                     seatElement.className = "r";
                     seatElement.innerHTML = 'R';
                 } else {
                     console.log(`未找到ID为${obj.seat}的元素`);
                 }
             }
         }
     });
     

  3. 在<script>标签添加defer属性：<script src="你的脚本文件.js" defer></script>，脚本会在DOM加载完成后自动执行。

• 添加空值判断防御性编程
  如上面代码所示，增加if(seatElement)判断，即使遇到找不到元素的情况，也不会阻断后续代码执行，还能通过控制台输出定位问题。

• 检查是否存在重复ID
  若HTML中存在多个相同ID的元素，getElementById只会返回第一个匹配项，可能导致目标元素未被找到，需确保每个ID唯一。

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