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

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

• javascript
• button
• undefined
• toggle

• 1 What do you think getElementsByClassName returns? How would your code be expected to work for multiple elements? – traktor Commented Oct 7, 2021 at 10:00

3 Answers 3

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>

I think there is a for loop missing and a counting variable.

Your code should look like this:

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";
  }

}

"getElementsByClassName" returns an array-like object, not a single object.

You can iterate over the object using a forEach:

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

You can find more on that here: https://developer.mozilla/en-US/docs/Web/API/Document/getElementsByClassName