JavaScript展开/收起按钮报错：Uncaught TypeError: Cannot set 'onclick' of null

嘿，这个问题我太熟悉了！报错的核心原因很直白：你的JavaScript代码放在<head>标签里，浏览器会优先执行这部分代码，但此时<body>里的<a id="show-more">元素还没被加载渲染，所以document.getElementById("show-more")返回的是null，自然没法给它设置onclick事件啦。

下面给你几个简单的解决方案，选适合你的就行：

方案1：把脚本移到<body>末尾 #

这是最直接省心的办法，等所有DOM元素都加载完成后再执行脚本：

</head>
<body>
<div id="content">Lorem ipsum dolor sit amet, ante dignissim, varius elit urna erat odio lectus. Aenean laoreet pellentesque justo maecenas nec, viverra diam cras, lorem at vitae vestibulum, arcu lobortis ac. Netus vitae wisi odio vitae sagittis tortor, cras mauris <br> <br> Urna volutpat libero libero, sed aliquet habitant. Metus sed. Velit sodales mauris purus ac nullam, ac eget lectus quam odio quisque urna, sed tempor sodales lorem dolor velit vestibulum, dui mattis cursus consequat porttitor. Pede velit viverra magna consectetuer, </div>
<a id="show-more">SHOW MORE</a>

<script>
var content = document.getElementById("content");
var button = document.getElementById("show-more");
button.onclick = function () {
    if(content.className === "open"){
        // 收缩内容
        content.className = "";
        button.textContent = "SHOW MORE";
    } else {
        // 展开内容
        content.className = "open";
        button.textContent = "SHOW LESS";
    }
};
</script>
</body>
</html>

（顺带提一句，用textContent比innerHTML更安全，这里只是小优化~）

方案2：监听DOM加载完成事件 #

如果一定要把脚本留在<head>里，可以让代码等待整个DOM树加载完成后再执行：

<script>
// 等DOM全部加载好再执行代码
document.addEventListener('DOMContentLoaded', function() {
    var content = document.getElementById("content");
    var button = document.getElementById("show-more");
    button.onclick = function () {
        if(content.className === "open"){
            content.className = "";
            button.textContent = "SHOW MORE";
        } else {
            content.className = "open";
            button.textContent = "SHOW LESS";
        }
    };
});
</script>
</head>
<body>
<div id="content">Lorem ipsum dolor sit amet, ante dignissim, varius elit urna erat odio lectus. Aenean laoreet pellentesque justo maecenas nec, viverra diam cras, lorem at vitae vestibulum, arcu lobortis ac. Netus vitae wisi odio vitae sagittis tortor, cras mauris <br> <br> Urna volutpat libero libero, sed aliquet habitant. Metus sed. Velit sodales mauris purus ac nullam, ac eget lectus quam odio quisque urna, sed tempor sodales lorem dolor velit vestibulum, dui mattis cursus consequat porttitor. Pede velit viverra magna consectetuer, </div>
<a id="show-more">SHOW MORE</a>
</body>
</html>

方案3：给脚本加defer属性 #

<script>标签的defer属性会告诉浏览器：先加载脚本，但等DOM全部加载完成后再执行它，这样既可以保留脚本在<head>里，又不会出问题：

<script defer>
var content = document.getElementById("content");
var button = document.getElementById("show-more");
button.onclick = function () {
    if(content.className === "open"){
        content.className = "";
        button.textContent = "SHOW MORE";
    } else {
        content.className = "open";
        button.textContent = "SHOW LESS";
    }
};
</script>
</head>
<body>
<div id="content">Lorem ipsum dolor sit amet, ante dignissim, varius elit urna erat odio lectus. Aenean laoreet pellentesque justo maecenas nec, viverra diam cras, lorem at vitae vestibulum, arcu lobortis ac. Netus vitae wisi odio vitae sagittis tortor, cras mauris <br> <br> Urna volutpat libero libero, sed aliquet habitant. Metus sed. Velit sodales mauris purus ac nullam, ac eget lectus quam odio quisque urna, sed tempor sodales lorem dolor velit vestibulum, dui mattis cursus consequat porttitor. Pede velit viverra magna consectetuer, </div>
<a id="show-more">SHOW MORE</a>
</body>
</html>

最后别忘了加上CSS来实现真正的截断和展开效果，不然点击按钮只会改文字，内容不会变哦：

#content {
    max-height: 100px; /* 默认只显示100px高度 */
    overflow: hidden; /* 超出部分隐藏 */
    transition: max-height 0.3s ease; /* 加上过渡动画更流畅 */
}
#content.open {
    max-height: 1000px; /* 设置一个足够大的值，确保能装下所有内容 */
}

这样整个功能就能完美运行啦！

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