Actualmente estoy en el proceso de crear una aplicación de prueba y una de las cosas que estoy tratando de lograr es pasar de una pregunta a la siguiente haciendo clic en el botón "siguiente" que he creado. Tengo 3 preguntas creadas y solo puedo hacer que mi prueba pase de la pregunta 1 a la pregunta tres. Entonces, esencialmente, se omite la pregunta 2 y no estoy seguro de por qué. ¡Cualquier ayuda sería apreciada! Consulte mi código/bolígrafo de código a continuación https://codepen.io/Michaelm4100/pen/GRQxNQO?editors=1011
// activeQuestion function to remove / add the active-question to each question function activeQuestion(el) { var que = document.getElementsByClassName('question'); for (var questions of que) { // console.log(questions) // removing active-question class questions.classList.remove('active-question'); } questions.classList.add('active-question'); } var nextButton = document.getElementsByClassName('nxt-btn'); for (var buttons of nextButton) buttons.addEventListener('click', function(e){ // calling active Question to button event listener activeQuestion(e); }) }Cuando haces var questions of que , el valor final de questions es el último elemento, por lo que cuando haces questions.classList.add('active-question') después de que finaliza el ciclo, siempre estás agregando la clase a la final elemento.
En su lugar, realice un seguimiento de la pregunta activa actual con una variable de índice persistente.
const questions = document.querySelectorAll('.question'); let activeQuestionIndex = 0; for (const nextButton of document.getElementsByClassName('nxt-btn')) { nextButton.addEventListener('click', () => { questions[activeQuestionIndex].classList.remove('active-question'); activeQuestionIndex++; questions[activeQuestionIndex]?.classList.add('active-question'); }); }