0

Quiero que al presionar el botón "Aquí" desaparezcan los inputs utilizando javaScript, pero no funciona.

<div class="cuerpoLogin">
  <label id="loginLabel">Inicio de sesión</label>
  <input type="email" class="inputs" placeholder="[email protected]">
  <input type="password" class="inputs" placeholder="Contraseña">
  <button id="buttonLogin" type="button">Iniciar sesión</button>
  <div class="registro">
    <p>Registrate<br>
      <button id="buttonR" onclick="myFunction()" type="button" name="button">Aquí</button>
    </p>
    <script>
      function myFunction() {
        document.getElementByClassName("inputs").style.display = 'none';
      }
    </script>
  </div>
</div>

4
  • Prueba con getElementsByClassName Commented el 12 nov. 2022 a las 21:17
  • La función es getElementsByClassName, te faltó la "s"
    – Ouariachi
    Commented el 12 nov. 2022 a las 21:17
  • Negativo tampoco es eso:(
    – melvswlrd
    Commented el 12 nov. 2022 a las 21:21
  • El depurador me suelta esto: "Uncaught TypeError: can't access property "display", document.getElementsByClassName(...).style is undefined"
    – melvswlrd
    Commented el 12 nov. 2022 a las 21:26

2 respuestas 2

0

El primer error es que es document.getElementsByClassName (getElement S ByClassName)

El segundo es que esa función retorna algo similar a un array de elementos (sin ser enteramente un array). Es decir NO es un solo elemento.

Recomiendo cambiar por querySelectorAll y usar un forEach, corto y simple

<div class="cuerpoLogin">
  <label id="loginLabel">Inicio de sesión</label>
  <input type="email" class="inputs" placeholder="[email protected]">
  <input type="password" class="inputs" placeholder="Contraseña">
  <button id="buttonLogin" type="button">Iniciar sesión</button>
  <div class="registro">
    <p>Registrate<br>
      <button id="buttonR" onclick="myFunction()" type="button" name="button">Aquí</button>
    </p>
    <script>
      function myFunction() {
        document.querySelectorAll(".inputs").forEach(e => {
        e.style.display = 'none';
        });
      }
    </script>
  </div>
</div>

0

El problema es que estás intentando acceder a solo una clase con getElementByClassName(). Lo correcto sería usar getElementsByClassName() para coleccionar todas las clases. Ahora para aplicarle los estilos, puedes hacerlo con el ciclo for para darle los estilos a cada clase coleccionada:

<div class="cuerpoLogin">
  <label id="loginLabel">Inicio de sesión</label>
  <input type="email" class="inputs" placeholder="[email protected]" />
  <input type="password" class="inputs" placeholder="Contraseña" />
  <button id="buttonLogin" type="button">Iniciar sesión</button>
  <div class="registro">
    <p>
      Registrate
      <button id="buttonR" onclick="myFunction()" type="button" name="button">
        Aquí
      </button>
    </p>
    <script>
      function myFunction() {
        var inputs = document.getElementsByClassName('inputs');
        for (var i = 0; i < inputs.length; i+=1){
          inputs[i].style.display = 'none';
        }
      }
    </script>
  </div>
</div>

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.