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
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>"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.org/en-US/docs/Web/API/Document/getElementsByClassName
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";
}
}