Así que estoy tratando de hacer un formulario de varios pasos con la clase activa aplicada al paso actual. Al hacer clic en Siguiente, quiero eliminar esa clase y agregarla a la próxima iteración de esas clases.
const nextBtn = document.querySelectorAll('.next'); const prevBtn = document.querySelectorAll('.previous'); const submitBtn = document.querySelectorAll('.submit'); const progress_li = document.querySelector('.progress-bar_li'); const fieldset = document.getElementsByTagName('fieldset'); const step = document.getElementsByClassName( 'step' ); const active_fieldset = document.getElementsByClassName('activeFieldset'); [...nextBtn].forEach(el => { el.addEventListener('click', e => { e.preventDefault(); [...registration_fieldset].forEach((className, i) => { if (className.classList.contains('activeFieldset')) { className.classList.remove('activeFieldset'); step[i + 1].classList.add('activeFieldset'); //^this doesn't work, nor does subbing step with className } }); }); }); Pug mixin nextandprev .btn-small.btn-small__reg.next Next .btn-small.btn-small__reg.previous Previous mixin next .btn-small.btn-small__reg.next Next mixin prevandsubmit .btn-small.btn-small__reg.previous Previous .btn-small.btn-small__reg.submit Submit <fieldset class="step activeFieldset">part 1 +next </fieldset> <fieldset> <fieldset class="step">sub 1 part 2 nextandprev </fieldset> <fieldset class="step"> sub 2 part 2 nextandprev </fieldset> </fieldset> <fieldset class="step">part 3 nextandprev </fieldset> <fieldset class="step">part 4 nextandprev </fieldset> <fieldset class="step">part 5 nextandprev </fieldset>Suponiendo que tiene la misma cantidad de botones y pasos siguientes, puede usar el índice de botones con el índice de pasos para agregar la clase al siguiente paso y eliminarla de todos los demás pasos.
const nextBtn = document.querySelectorAll('.next'); const prevBtn = document.querySelectorAll('.previous'); const steps = document.querySelectorAll('.step'); nextBtn.forEach((btn, btnIndex) => { btn.addEventListener('click', (e) => { e.preventDefault(); steps.forEach((step, stepIndex) => { // If button is for next step, add class to next step, else remove if (btnIndex === stepIndex - 1) { step.classList.add('activeFieldset'); } else { step.classList.remove('activeFieldset'); } }); }); }); .activeFieldset { border: 1px solid red; } <fieldset class="step activeFieldset"> <div>Part 1</div> <button class="next">Next</button> </fieldset> <fieldset> <fieldset class="step"> <div>Sub 1 Part 2</div> <button class="previous">Prev</button> <button class="next">Next</button> </fieldset> <fieldset class="step"> <div>Sub 2 Part 2</div> <button class="previous">Prev</button> <button class="next">Next</button> </fieldset> </fieldset> <fieldset class="step"> <div>Part 3</div> <button class="previous">Prev</button> <button class="next">Next</button> </fieldset> <fieldset class="step"> <div>Part 4</div> <button class="previous">Prev</button> <button class="next">Next</button> </fieldset> <fieldset class="step"> <div>Part 5</div> <button class="previous">Prev</button> <button class="next">Next</button> </fieldset>