Skip to main content
se añadieron 158 caracteres en el cuerpo
Origen Enlace
    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.getElementByIdgetElementsByClassName("stepOne");

    for(i=0; i<firstStep.lenght; i++){
        firstStep[i].className += "hide";
    }
}
    <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 id="stepOne" for="message-text" class="colclass="stepOne col-form-label">Nombre Completo</label>
              <input id="stepOne name"id="name" type="text" class="formclass="stepOne form-control">
              <label id="stepOne" for="message-text" class="colclass="step Onecol-form-label">Correo Electronico</label>
              <input id="stepOne email"id="email" type="text" class="formclass="stepOne form-control" >
              <label id="stepOne" for="message-text"  class="colclass=" stepOne col-form-label">Contraseña</label>
              <input id="stepOne pass"id="pass" type="password" class="formclass="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>
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.getElementById("stepOne");

for(i=0; i<firstStep.lenght; i++){
    firstStep[i].className += "hide";
}
}
<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 id="stepOne" for="message-text" class="col-form-label">Nombre Completo</label>
          <input id="stepOne name" type="text" class="form-control">
          <label id="stepOne" for="message-text" class="col-form-label">Correo Electronico</label>
          <input id="stepOne email" type="text" class="form-control" >
          <label id="stepOne" for="message-text"  class="col-form-label">Contraseña</label>
          <input id="stepOne pass" type="password" class="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>
    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";
    }
}
    <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>
Origen Enlace

¿Porqué no me funciona el metodo que utilice para agregar una clase con javascript?

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.getElementById("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 id="stepOne" for="message-text" class="col-form-label">Nombre Completo</label>
          <input id="stepOne name" type="text" class="form-control">
          <label id="stepOne" for="message-text" class="col-form-label">Correo Electronico</label>
          <input id="stepOne email" type="text" class="form-control" >
          <label id="stepOne" for="message-text"  class="col-form-label">Contraseña</label>
          <input id="stepOne pass" type="password" class="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>

Cabe destacar que esta hecho con bootstrap, Muchas gracias! Saludos