innerHTML标签问题：调试器提示'Uncaught TypeError: Cannot set properties of null'

这个错误Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')直接说明你通过document.querySelector("#message")获取到的message变量是null——也就是当前页面里找不到id为message的DOM元素。

核心解决步骤： #

• 检查你的HTML代码，确认是否存在带id="message"的元素，比如：

  <div id="message"></div>
  

  注意id的拼写要完全一致，且大小写敏感（比如Message和message会被识别为两个不同的id）。
• 如果HTML里确实有该元素，再确认它是否在脚本执行前已完成渲染（你已经用了DOMContentLoaded事件，这一步问题不大，但要确保元素不是通过后续动态脚本生成的）。

额外容错优化（可选） #

为了避免类似null报错，你可以在操作DOM元素前先判断元素是否存在，修改后的代码如下：

document.addEventListener('DOMContentLoaded', function listen() {
    let correct_button = document.querySelector("#correct");
    let incorrect_buttons = document.querySelectorAll(".incorrect");
    let message = document.querySelector("#message");

    // 确认元素存在后再绑定事件
    if (correct_button && message) {
        correct_button.addEventListener('click', function() {
            correct_button.style.backgroundColor = "green";
            message.innerHTML = "Hello";
        });
    }

    for (let i = 0; i < incorrect_buttons.length; i++) {
        incorrect_buttons[i].addEventListener('click', function() {
            this.style.backgroundColor = "red"; // 用this替代incorrect_buttons[i]更稳妥
        });
    }
});

另外，在不正确按钮的点击事件里，用this代替incorrect_buttons[i]可以避免循环中可能出现的变量作用域问题，让代码更可靠。

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