Un placer saludarlos de nuevo, verán tengo una duda, estoy haciendo un formulario con HTML CSS y JavaScript, este formulario al tener muchas preguntas decidí mostrarlas en secciones, al presionar el botón de siguiente o anterior se ocultan estas secciones.
// Página actual
let curPage = 0;
// Obtener páginas y botones
let pages = document.querySelectorAll('.form-page');
let btnPrev = document.querySelector('#btn-prev');
let btnNext = document.querySelector('#btn-next');
// Función para avanzar o retroceder, recibe 1 (avanzar) o -1 (retroceder)
function showPage(action) {
// Página a mostrar según el valor recibido
curPage += action;
// Validar que la página a mostrar esté dentro de los límites
if(curPage < 0) {
curPage = 0;
}
if(curPage >= pages.length) {
curPage = pages.length - 1;
}
// Recorrer para mostrar u ocultar
pages.forEach((page, index) => {
if(index == curPage) {
// Es página actual, se debe mostrar
page.classList.add('active');
} else {
// Las demás se van a ocultar
page.classList.remove('active');
}
});
// Habilitar o deshabilitar botones
btnPrev.disabled = (curPage == 0);
btnNext.disabled = (curPage == pages.length - 1);
};
// Asignar evento a botones para avanzar y retroceder
btnPrev.addEventListener('click', e => showPage(-1));
btnNext.addEventListener('click', e => showPage(1));
.form-page {
display: none;
}
.form-page.active {
display: block;
}
<div class="form-page active">
<h2>Página 1</h2>
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
</div>
<div class="form-page">
<h2>Página 2</h2>
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
<label for="">lorem ipsum</label>
<input type="text" name="" id="" class="form-input" placeholder="Algo random">
</div>
<div class="form-buttons">
<button type="button" id="btn-prev" disabled>Anterior</button>
<button type="button" id="btn-next">Siguiente</button>
</div>
<!-- begin snippet: js hide: false console: true babel: false -->
Con este código puedo moverme entre secciones pero no puedo lograr que se oculten los botones si les doy estilos a cada uno, lo que necesito hacer es cuando se está en el inicio del formulario se oculte el botón de "Anterior" y cuando se esté en el final del formulario se oculte el botón de "Siguiente". Si quito el css que le he dado a ambos botones se puede apreciar el efecto del cambio del botón a disabled pero necesito darle css a esos botones, de antemano muchas gracias.