Uncaught TypeError错误排查及复选框控制div显示实现问题

你遇到的Uncaught TypeError及功能不符合预期的问题，我帮你梳理清楚原因并给出修复方案：

错误根源分析 #

• HTML标签语法错误：<input>是自闭合标签，不需要额外写</input>，错误的闭合方式会导致浏览器解析异常，干扰JS函数的正常绑定。
• 空值访问报错：如果页面里不存在id="tryok"和id="tryok2"的元素，document.getElementById()会返回null，此时访问null.style就会抛出TypeError。
• 逻辑不匹配需求：原代码是切换元素显示状态，但你需要的是勾选复选框时显示div，取消勾选时隐藏，而非无差别切换。

修复后的完整代码 #

先确保页面存在目标元素（示例结构如下），再替换成以下代码：

<!-- 先定义目标div，默认设置为隐藏 -->
<div id="tryok" style="display: none;">样本实验区域1</div>
<div id="tryok2" style="display: none;">样本实验区域2</div>

<!-- 修正后的复选框 -->
<p>是否要将此样本加入实验？<input type="checkbox" id="showdivs" onclick="toggleDivs()"></p>

<script>
function toggleDivs() {
  // 获取复选框的勾选状态
  const isChecked = document.getElementById('showdivs').checked;
  // 获取目标元素并做存在性校验
  const targetDiv1 = document.getElementById("tryok");
  const targetDiv2 = document.getElementById("tryok2");
  
  if (targetDiv1 && targetDiv2) {
    // 根据勾选状态控制显示/隐藏
    targetDiv1.style.display = isChecked ? 'block' : 'none';
    targetDiv2.style.display = isChecked ? 'block' : 'none';
  } else {
    console.warn('请检查页面中是否存在id为tryok和tryok2的元素');
  }
}
</script>

关键修改说明 #

• 修正了<input>标签的写法，去掉多余的闭合标签，符合HTML标准语法。
• 增加了元素存在性判断，避免因找不到元素而抛出错误。
• 直接根据复选框的checked状态控制显示逻辑，完全匹配你“勾选时显示指定div”的需求。
• 如果目标元素是<ul>，可以把display: block改成display: list-item，更贴合元素类型的默认显示规则。

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