Search code examples
javascriptbuttonundefinedtoggle

Cannot read properties of undefined (reading 'display')

I'm trying to toggle text showing when I click a button for each item I have in a Carousel.

When I use "getElementByID" it works fine, but I need to use "getElementsByClassName" because it's a repeater field in the backend and there are several buttons in the whole carousel.

Anyway here is my code -

 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>

And the error i'm getting is - Cannot read properties of undefined (reading 'display')

Any help is greatly appreciated, thanks

Solution

  • getElementsByClassName returns array of elements. this is my solution:

     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>