如何隐藏class类不报错及quiz模块切换时style undefined报错原因

一、现有代码运行逻辑 #

• 初始加载阶段：CSS规则给所有.part2类元素设置visibility: collapse，因此第二部分的题目、选项、结果区默认全部隐藏，页面仅展示第一部分的欢迎语和Begin按钮。
• 点击Begin按钮后触发begin()函数：首先获取页面内所有带.part2类的元素，遍历所有元素将其visibility属性设为visible，展示第一题内容。
• 答题交互逻辑：点击选项「1」会触发q1nextwrong()函数，在结果区展示「no」；点击选项「2」会触发q1nextcorrect()函数，在结果区展示「yes」。

二、报错原因 #

报错的核心是begin()函数内的while循环边界设置错误：
document.getElementsByClassName返回的是类数组结构的HTMLCollection，索引从0开始计数，假设集合长度为n，合法的索引范围是0 ~ n-1。你设置的循环条件是b.length >= b2，当b2自增到等于b.length时，依然会进入循环执行逻辑，此时b[b2]的值为undefined，尝试访问undefined的style属性就会抛出该类型错误。

三、修复方案 #

1. 修复循环报错 #

只需要调整while循环的边界条件即可，也可以改用forEach遍历避免边界书写错误：

function begin() {
  var b = document.getElementsByClassName("part2")
  var b2 = 0
  // 调整循环条件为小于集合长度
  while (b2 < b.length) {
    b[b2].style.visibility = "visible";
    b2 += 1;
  }
  return b
}

如果想简化代码可以转成数组用forEach遍历：

function begin() {
  Array.from(document.getElementsByClassName("part2")).forEach(el => {
    el.style.visibility = "visible"
  })
}

2. 优化类元素隐藏逻辑 #

你当前使用的visibility: collapse是针对表格元素设计的属性值，普通元素隐藏推荐用以下两种方案：

• 如需隐藏后元素仍保留原有页面占位，用visibility: hidden，对应显示时设置visibility: visible即可
• 如需隐藏后元素不占用页面位置，页面布局和元素不存在时一致，用display: none，对应显示时设置display: block（或对应元素的默认display属性值）
  示例CSS修改：

.part2{
  display: none;
}

对应js显示逻辑修改：

el.style.display = "block"

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