JavaScript报错：Cannot set properties of null (setting 'onclick') 求助

错误原因 #

出现caught TypeError: Cannot set properties of null (setting 'onclick')的核心问题是HTML中ID重复定义：你给外层的div和内部的button都设置了id="button"，而HTML规范要求页面内的ID必须唯一。document.getElementById("button")只会返回第一个匹配的元素（也就是外层的div），若浏览器解析时出现异常，甚至可能返回null，导致无法绑定点击事件。

修复方案 #

修改后的完整代码 #

<HTML>
<body>
<div class="input-box">
   <span class="details">Full Name</span>
   <input id="full_name" type="text" placeholder="Enter your name" required>
</div> 
<div class="button">
    <button id="submit-button">Submit</button>
</div>

<script>
document.getElementById("submit-button").onclick = function() {
    var FullName = document.getElementById("full_name").value;
    console.log(FullName);
}
</script>
</body>
</HTML>

关键修改点 #

• 移除外层div的id="button"，给button设置唯一的IDsubmit-button
• 在JavaScript中通过新的唯一ID获取按钮元素，绑定点击事件

额外优化建议 #

• 始终保证HTML元素ID的唯一性，这是前端开发的基础规范，能避免很多DOM选择相关的问题
• 也可以使用事件委托的方式绑定事件，适合动态生成元素的场景：

document.querySelector('.button').addEventListener('click', function(e) {
    if(e.target.tagName === 'BUTTON') {
        var FullName = document.getElementById("full_name").value;
        console.log(FullName);
    }
});

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