Estoy tratando de alternar el texto que se muestra cuando hago clic en un botón para cada elemento que tengo en un carrusel.
Cuando uso "getElementByID" funciona bien, pero necesito usar "getElementsByClassName" porque es un campo repetidor en el backend y hay varios botones en todo el carrusel.
De todos modos, aquí está mi código:
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>Y el error que recibo es: no se pueden leer las propiedades de undefined (leyendo 'pantalla')
Cualquier ayuda es muy apreciada, gracias
getElementsByClassName devuelve una matriz de elementos. esta es mi solucion:
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" devuelve un objeto similar a una matriz, no un único objeto.
Puede iterar sobre el objeto usando un forEach:
Array.prototype.forEach.call(x, function(element) { if (element.style.display === "none") { element.style.display = "block"; } else { element.style.display = "none"; } } );Puede encontrar más sobre eso aquí: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
Creo que falta un bucle for y una variable de conteo.
Su código debería verse así:
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"; } }