1

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

7
  • Muchas gracias como siempre Benito, voy a probarlo Commented el 22 dic. 2020 a las 23:39
  • Una pregunta, puedo agregarle otro class, es decir: Commented el 22 dic. 2020 a las 23:40
  • <input class="stepOne" id="pass" type="password" class="form-control"> Commented el 22 dic. 2020 a las 23:40
  • Muchisimas gracias, solo tenia la duda de ver si podia funcionar, pero ya vi que no! Commented el 22 dic. 2020 a las 23:43
  • No me funciona @Benito-B, actualizare el post con los cambios Commented el 22 dic. 2020 a las 23:45

2 respuestas 2

2

En vez de varios comentarios, te dejo mejor una respuesta entera:

El error principal está en la manera de acceder a las clases de los elementos, ya que estas forman una lista (accesible en el atributo classList. La manera más correcta sería:

// Accedo a todos los elementos de clase "texto"
const textos = document.getElementsByClassName("texto"); 
for (let i = 0; i < textos.length; i++) { // Recorro el array
  textos[i].classList.add("red");  /* Para cada elemento, accedo a su lista de clases
 y le añado la clase "red", que hará que se vean en rojo */
}
.red {
  color: red;
}
<p class="texto">Soy un texto</p>
<p class="texto">Soy un texto</p>
<p class="texto">Soy un texto</p>

Espero que este breve ejemplo te sirva, cualquier duda aquí estamos.

1
  • Hice la modificacion de ClassName a ClassList, pero todavia no me funciona Commented el 23 dic. 2020 a las 0:39
2

El código que te ofrece @Benito-B es perfecto. No obstante, como estás tratando de usar className te voy a plantear una sugerencia:
El atributo className es una cadena de texto. De modo que si le agregas "hide" creas como nombre de clase "stepOnehide" debes hacer la adición con un espacio así " hide". Muestro un código de prueba.

function register(){
    var firstStep = document.getElementsByClassName("stepOne");
    firstStep[0].className += " hide";
}
.hide{ display: none; }  
<div onclick="register()" class="stepOne">
<p>Haga click aquí para ocultar el texto</p>
</div>

Este mecanismo tiene un problema: si la clase ya hubiese sido agregada se genera una doble asignación.
Espero te sirva para aclarar la duda. Porque el código de @Benito-B es el correcto. El mio es para que opere lo que tratabas de hacer, con el recurso que usabas.

2
  • Efectivamente, se puede usar de esa manera, pero luego a la hora de eliminar una clase, usar className es un rollo! Por eso intento evitar el uso de className siempre que puedo. Siempre hay excepciones claro, por ejemplo, cuando tienes una clase element y otras derivadas como element--white y element--black, en ese caso, y siempre que no vaya a necesitar aplicar otras clases a esos elementos, sí usaría className para concatenarle la variación que necesite en el momento. Excelente aporte de todas maneras
    – Benito-B
    Commented el 23 dic. 2020 a las 10:25
  • Gracias por el comentario @Benito-B. Justamente por eso insistí en que tu respuesta es el camino correcto mientras que la mía es apenas una sugerencia para ayudar a entender el atributo className
    – quevedo
    Commented el 23 dic. 2020 a las 19:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.