I hope you are having a good day, I find myself making a registry modal on my page as a personal practice method, and I came up with the idea of making that when the registry is created, the input and the label of the same registry are hidden and shown an "Account created successfully" message, so I started to investigate how to do it and learned about the ".className" class, so I made this system guided by one I saw in another 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";
}
}
The problem is that it doesn't work, and I don't know why, the class is well created, I already tried adding it manually and it works fine, the class is:
.hide{
display: none;
}
And the modal is as follows:
<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>
It should be noted that it is made with bootstrap, thank you very much! Cheers
Instead of several comments, I'd rather give you a full answer:
The main error is in the way of accessing the classes of the elements, since these form a list (accessible in the attribute
classList
. The most correct way would be:I hope this brief example will help you, any questions here we are.
The code that @Benito-B offers you is perfect. However, since you're trying to use className I'll give you a tip:
The className attribute is a string . So if you add "hide" you create the class name "stepOnehide" you must do the addition with a space like " hide" . I show a test code.
This mechanism has a problem: if the class had already been added, a double assignment is generated.
I hope it helps you to clarify the doubt. Because @Benito-B's code is correct . Mine is to operate what you were trying to do, with the resource you were using.