使用getElementsByClassName切换显隐时报Cannot read properties of undefined错误

document.getElementsByClassName() 返回的是包含所有匹配类名元素的HTMLCollection类数组集合，而非单个DOM元素，集合本身不存在style属性，因此访问x.style时会抛出undefined报错。

你需要让点击事件绑定当前触发的按钮，只切换对应位置的文本显隐，无需全局查找所有类名元素，修改方式如下：

1. 修改按钮的点击事件，将当前按钮实例作为参数传入函数
2. 函数内根据当前按钮的DOM结构，匹配到对应的figcaption元素即可

修改后的完整代码：

function toggleText(currentBtn) {
  // 若按钮和figcaption为相邻同级元素，用nextElementSibling直接匹配
  // 若结构不同，可替换为 currentBtn.parentElement.querySelector('.figure-caption-test') 查找父容器内的对应文本元素
  var targetText = currentBtn.nextElementSibling;
  if (targetText.style.display === "none") {
    targetText.style.display = "block";
  } else {
    targetText.style.display = "none";
  }
}

<!-- 每个轮播子项内的按钮和文本都可以复用以下结构，无需设置重复id -->
<button class="figure-button" onclick="toggleText(this)">
REVEAL ANSWER
</button>

<figcaption class="figure-caption-test" style="display: none;">
Text that appears
</figcaption>

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