Tengo mi programa configurado para que genere automáticamente HTMl y lo coloque en la página web. A cada introducción de HTMl nuevo se le otorga una nueva ID siguiendo el incremento en el que se encuentra, por ejemplo, <div id = "genQuestion0"> <div id = "genQuestion1"> etc.
Todos los div iniciales se han configurado a través de CSS como sin visualización.
[id^="genQuestion"]{ text-align: center; display: none; } La primera pregunta id = genQuestion0 se ha configurado para que, al generarse, su visualización se configure en block .
¿Cómo puedo hacer que cuando se presiona un botón, la visualización de las preguntas anteriores cambie a none y la siguiente se configure para block ?
Esto es lo que tengo actualmente para mi función pero no funciona.
var countclicks = 0; const nextQuestion = () =>{ var elementName = `genQuestion${countclicks}`; var elementNameNeg = `genQuestion${(countclicks - 1)}`; elementName.style.display = "block"; elementNameNeg.style.display = "none"; countClicks ++; }Es porque tu es solo una cadena y no un elemento DOM.
Puede acceder a ese elemento usando document.getElementById(elementNameNeg).style.display = 'block';
Entonces, ¿cambiar a esto?
var countclicks = 0; const nextQuestion = () =>{ var elementName = `genQuestion${countclicks}`; var elementNameNeg = `genQuestion${(countclicks - 1)}`; document.getElementById(elementName).style.display = "block"; document.getElementById(elementNameNeg).style.display = "none"; countClicks ++; }