Estoy haciendo un formulario que va cambiando el entre distintos div a medida que se clickea en next.
El problema es que, si bien este cambia al siguiente div, el formulario regresa al div de la posicion 0 de forma automatica (cambia el display del css entre none y block).
<div class="car-container" id="card-container">
<div class="form-one" id="one">
<h3>Personal information</h3>
<form action="">
<input type="text" placeholder="name"><br/>
<input type="text" placeholder="lastnane" name="" id=""><br/>
<button id="next">next</button>
</form>
</div>
<div class="form-two" id="two">
<h3>Address</h3>
<form action="">
<input type="text" placeholder="City"><br/>
<input type="text" placeholder="Address" name="" id=""><br/>
<button id="save">save</button>
</form>
</div>
</div>
Js:
const card_container = document.getElementById('card-container');
const one = document.getElementById('one');
const two = document.getElementById('two');
const next = document.getElementById('next');
next.addEventListener('click', () => {
let elements_array = [one, two];
let current_pos = 0;
elements_array[current_pos].style.display = 'block';
let next_pos = current_pos + 1;
if(next_pos) {
elements_array[next_pos].style.display = 'block';
}
});
css:
.car-container {
border: lightgray .7px solid;
width: max-content;
padding: .5rem;
height: 300px;
}
.form-one {
display: block;
}
.form-two {
display: none;
}
input[type="text"] {
margin-bottom: .7rem;
}