无法读取未定义的属性（读取 'display'）

Question

我正在尝试切换当我点击轮播中每个项目的按钮时显示的文本。

当我使用“getElementByID”时它工作正常，但我需要使用“getElementsByClassName”，因为它是后端的转发器字段并且整个轮播中有几个按钮。

无论如何这是我的代码 -

 function toggleText(){
  var x = document.getElementsByClassName("figure-caption-test");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<button class="figure-button" id="figure-button" onclick="toggleText()">
REVEAL ANSWER
</button>

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

我得到的错误是 - 无法读取未定义的属性（读取 'display'）

非常感谢任何帮助，谢谢

Answer 1

“getElementsByClassName”returns 类似数组的对象，而不是单个对象。

您可以使用 forEach 遍历对象：

Array.prototype.forEach.call(x, function(element) {
  if (element.style.display === "none") {
      element.style.display = "block";
    } else {
      element.style.display = "none";
    }
  }
);

您可以在此处找到更多相关信息：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Answer 2

我认为缺少一个 for 循环和一个计数变量。

您的代码应如下所示：

var x = document.getElementsByClassName("figure-caption-test");
var i;
for (i=0; i < x.length; i++) { 

if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }

}

Answer 3

getElementsByClassName returns 元素数组。这是我的解决方案：

 function toggleText(){
  var elms = document.getElementsByClassName("figure-caption-test");

  Array.from(elms).forEach((x) => {
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  })
}

<button class="figure-button" id="figure-button" onclick="toggleText()">
REVEAL ANSWER
</button>

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

无法读取未定义的属性（读取 'display'）

Cannot read properties of undefined (reading 'display')

javascript

button

undefined

toggle