espero esten teniendo un buen dia, me encuentro haciendo un modal registro en mi pagina a metodo de practica personal, y se me ocurrio la idea de hacer que cuando el registro sea creado, se oculten los input y los label del mismo registro y se muestre un mensaje de "Cuenta creada exitosamente", entonces me puse a investigar como hacerlo y aprendi sobre la clase ".className, entonces hice este sistema guiandome de uno que vi en otro post:
function register(){
console.log("Este console.log es para ver si el codigo entra a esta parte del programa, y si funciona");
var firstStep = document.getElementsByClassName("stepOne");
for(i=0; i<firstStep.lenght; i++){
firstStep[i].className += "hide";
}
}
El problema es que no funciona, y no se porque, la clase esta bien creada, ya probe agregarla manualmente y funciona bien, la clase es:
.hide{
display: none;
}
Y el modal es el siguiente:
<div class="modal-register modal fade" id="register" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="stepOne exampleModalLabel">Registro</h5>
<h5 id="stepTwo" class="hide">Registro existoso</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<p class="error-message"></p>
<p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, libero. Porro, sint optio! Laboriosam asperiores, quam quasi eius, natus consequuntur porro minima, veritatis eum molestiae nulla deserunt incidunt eveniet! Dolores aperiam deserunt quisquam, fugit dolorem perspiciatis eos consequuntur totam repellendus veniam quas corrupti, alias cum?</p>
<label for="message-text" class="stepOne col-form-label">Nombre Completo</label>
<input id="name" type="text" class="stepOne form-control">
<label for="message-text" class="step Onecol-form-label">Correo Electronico</label>
<input id="email" type="text" class="stepOne form-control" >
<label for="message-text" class=" stepOne col-form-label">Contraseña</label>
<input id="pass" type="password" class="stepOne form-control">
</div>
<div class="mb-3">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="cerrar()" data-bs-dismiss="modal">Cerrar</button>
<button id="buttonContinue" type="button" onclick="register()" class="btn btn-primary">Continuar</button>
</div>
</div>
</div>
</div>
Cabe destacar que esta hecho con bootstrap, Muchas gracias! Saludos