点击按钮显示隐藏div时Mozilla调试器报null，求解决方法

API 探路者

2026-5-22

解决JavaScript获取元素返回null的问题

别担心，自学过程中遇到这种问题太正常了！我帮你分析下可能的原因和对应的解决办法：

最核心的问题：混淆了class和id的用法
你代码里的div用的是class="box"，但JavaScript里调用的是document.getElementById("box")——这个方法是专门根据id属性查找元素的，完全不识别class。所以有两种修正方式：
要么给div补上id属性：
```
<div class="box" id="box"> <p class="c...
```
要么改用class选择器获取元素（注意getElementsByClassName返回的是元素集合，要取第一个匹配项）：
```
function Show() { 
  var ele = document.getElementsByClassName("box")[0]; 
  ele.style.visibility= "visible" ; 
}
```
或者用更灵活的querySelector（直接写CSS选择器语法）：
```
function Show() { 
  var ele = document.querySelector(".box"); 
  ele.style.visibility= "visible" ; 
}
```
避免重复的id属性
你的script标签和按钮都用了id="but1"，HTML规范里id必须是页面唯一的，虽然这不一定直接导致null错误，但可能引发其他奇怪的兼容性问题，建议把script的id去掉：
```
<script> 
  function Show() { 
    var ele = document.getElementById("box"); 
    ele.style.visibility= "visible" ; 
  } 
</script>
```
确保DOM加载完成后再执行JS
如果你的JavaScript代码写在页面头部（比如<head>标签里），浏览器执行JS时，下方的div和按钮还没被渲染出来，getElementById自然会返回null。解决办法有两个：
1. 把script标签放到</body>标签的前面，让页面元素都加载完成后再执行JS。
2. 用DOM加载完成事件包裹你的函数：
```
document.addEventListener('DOMContentLoaded', function() {
  function Show() { 
    var ele = document.getElementById("box"); 
    ele.style.visibility= "visible" ; 
  }
});
```