项目中出现“无法设置 null 的属性”错误

"Cannot set properties of null" error in project

提问人：Adithya Suresh 提问时间：4/9/2023 最后编辑：JMPAdithya Suresh 更新时间：4/9/2023 访问量：50

问：

我是 js/html 的新手，当我添加“document.getElementById”标签后出现此错误时，这个小项目即将完成。

这是显示控制台中错误的图像

以下是 im 编写的函数和它所引用的对象。

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"
        }
    }
};

看到多个堆栈说对象需要在“getElementById”标签上方，已经这样做了，但它仍然不起作用。

JavaScript HTML 对象

评论

1赞 Unmitigated 4/9/2023
请提供一个最小的可重复示例。可能没有具有您指定的 id 的元素。
0赞 mplungjan 4/9/2023
请访问帮助中心，参观以查看什么以及如何询问。做一些研究，搜索 SO 上的相关主题;如果你遇到困难，请发布一个最小的可重复的尝试示例，注意输入和预期输出，最好是在 Stacksnippet 中
0赞 Don't Panic 4/9/2023
没有你的代码，我们无能为力，只能指出显而易见的事情 - 错误说你的代码找不到元素。stackoverflow.com/questions/how-to-ask，stackoverflow.com/help/mcve
0赞 VLAZ 4/9/2023
很可能是重复的：为什么 jQuery 或 DOM 方法（如 getElementById）找不到元素？

答：

0赞 JMP 4/9/2023 #1

您需要先声明对象，然后才能使用它们（即对象不会提升）。

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"
        }
    }
};

for(const key1 in reservedSeats) {
        const obj=reservedSeats[key1]; 
        document.getElementById(obj.seat).className="r";
        document.getElementById(obj.seat).innerHTML='R';
}
td {width:20px;height:20px;background-color:green}
.r {background-color:red}
<table>
<tr><td id="a19"></td><td id="a20"></td></tr>
<tr><td id="a21"></td><td id="a22"></td></tr>
<tr><td id="b19"></td><td id="b20"></td></tr>
<tr><td id="b21"></td><td id="b22"></td></tr>
<tr><td id="c19"></td><td id="c20"></td></tr>
<tr><td id="c21"></td><td id="c22"></td></tr>
</table>

上一个：如果没有“function”关键字，此对象方法定义如何工作？

下一个：使用 object 在数组上映射时出现问题