鼠标事件修改文本报错：Cannot set property 'innerHTML' of null 求助

你遇到的「Cannot set property 'innerHTML' of null」错误，核心原因是DOM元素的ID属性书写错误，导致document.getElementById("text")找不到目标元素，返回了null，自然无法设置它的innerHTML属性。

错误根源 #

看你的<h1>标签代码：

<h1 id"text" onmousedown="MouseDown()" onmouseup="Mouseup()">BBB </h1>

这里的id"text"少了一个等号，正确的ID属性写法应该是id="text"。浏览器无法识别这个错误的属性，所以找不到ID为text的元素。

修正后的完整代码 #

<html>
<head>
    <title>HHH</title>
</head>
<body>
    <h1 id="text" onmousedown="MouseDown()" onmouseup="Mouseup()">BBB </h1>
    <script>
        function MouseDown() {
            document.getElementById("text").innerHTML = "CCC";
        }
        function Mouseup() {
            document.getElementById("text").innerHTML = "AAA";
        }
    </script>
</body>
</html>

额外小建议 #

1. 函数名尽量遵循驼峰命名规范，比如把Mouseup改成MouseUp，和MouseDown保持一致，代码可读性更好；
2. 可以把获取元素的操作提前缓存，避免每次事件触发都重新查询DOM，优化后的代码如下：

const textElement = document.getElementById("text");
function MouseDown() {
    textElement.innerHTML = "CCC";
}
function MouseUp() {
    textElement.innerHTML = "AAA";
}

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