Question

46

Cannot read properties of undefined (reading 'display')

rated 0 times [ 49] [ 3] / answers: 1 / hits: 10217 / 3 Years ago, thu, october 7, 2021, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

turnerf

Add To Favorites

Follow

Total Points: 620

Total Questions: 101

Total Answers: 109

Location: French Polynesia

Member since Tue, Jul 7, 2020

4 Years ago

turnerf questions

1 How should I import JSON in Node?

Sat, Mar 20, 21, 00:00, 3 Years ago

1 How to call a function every x seconds with updated state (React)

Tue, Jul 28, 20, 00:00, 4 Years ago

1 NestJS/swagger: what model is the ApiExtraModel expecting as a parameter?

Fri, Apr 10, 20, 00:00, 4 Years ago

1 TypeError: Cannot destructure property id of req.params as it is undefined

Sat, Apr 4, 20, 00:00, 4 Years ago

1 How to count common characters in two strings in JavaScript?

Tue, Mar 26, 19, 00:00, 5 Years ago

View All

answered 3 Years ago shaynelandenb · Accepted Answer

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>