Soy nuevo en javascript y estoy trabajando en un proyecto de prueba. Estoy tratando de recorrer los divs para que aparezcan uno por uno al hacer clic en el siguiente botón. Por alguna razón, se salta el segundo div.
<div id='question-one' class='questions active-question'></div> <div id='question-two' class='questions active-question'></div> <div id='question-three' class='questions active-question'></div> const nextButton = document.getElementById('myButton'); nextButton.addEventListener('click', setNextQuestion); function setNextQuestion() { var isNowTheActiveQuestion = document.getElementsByClassName('questions'); for (activeQuestion of isNowTheActiveQuestion) { activeQuestion.classList.remove('active-question'); } activeQuestion.classList.add('active-question'); }No necesita dar la clase de "pregunta activa" para todos los elementos. Debe indicar qué elemento desea ver primero.
<div id='question-one' class='questions active-question'></div> <div id='question-two' class='questions'></div> <div id='question-three' class='questions'></div>Ahora ven al código Js
const nextButton = document.getElementById('myButton'); nextButton.addEventListener('click', setNextQuestion); let count = 1; function setNextQuestion() { const isNowTheActiveQuestion = document.getElementsByClassName('questions'); for(let i = 0; i < isNowTheActiveQuestion.length; i++){ isNowTheActiveQuestion[i].classList.remove('active-question'); }; if(count > isNowTheActiveQuestion.length - 1){ count = 0; }; isNowTheActiveQuestion[count++].classList.add('active-question'); };