1

Tengo las siguientes etiquetas

<a href="#" onclick="mostrarContrasena()">
   <span  id="lg" data-feather="eye"></span>
</a>

como se muestra dentro de la etiqueta a tengo un span y quisiera poder cambiar el valor del atributo data-feader dentro de la función MonstrarContrasena pero no logro detectar el elemento

    function mostrarContrasena(){
      var tipo = document.getElementById("clave");
      if(tipo.type == "password"){
          tipo.type = "text";
      }else{
          tipo.type = "password";
      }
      // var div1 = document.getElementById("atributo");
  var align = document.getElementById('lg').getAttribute('data-feather');
      
  }

al hacer un console.log me muestra null

3
  • has probado con document.getElementById('lg').setAttribute("data-feather", "valor");?
    – masterguru
    Commented el 26 ene. 2022 a las 19:50
  • Tu código funciona bien. Pero donde está tu input? Commented el 26 ene. 2022 a las 19:52
  • Si, funciona bien... miralo aqui mismo: jsfiddle.net/x34boz0y/1
    – masterguru
    Commented el 26 ene. 2022 a las 19:53

2 respuestas 2

1

Espero que esto te sea de ayuda :).

Intenta evitar los onclick como atributo en alguna etiqueta (es un mal uso).

Para ver mejor el resultado, tienes que verlo en pantalla completa.

var botonMostrar = document.getElementById("showPassword"); // botón para mostrar y ocultar contraseña
var password = document.getElementById("password"); // input password
var bool = true; // boleano
botonMostrar.onclick = () => { // dar función al botón mostrar

  if (bool) {
    botonMostrar.innerText = "ocultar"; // cambiar el texto del botón
    password.setAttribute("type", "text"); // cambiar atributo del input para mostrar contraseña
    bool = false;
  } else {
    botonMostrar.innerText = "mostrar";
    password.setAttribute("type", "password"); // ocultamos la contraseña
    bool = true; // cambiamos el boleano a true
  }

};
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100vw;
  height: 100vh;
  background: rgb(111, 145, 220);
  position: relative;
}

form {
  width: 300px;
  height: 300px;
  background: rgb(247, 247, 247);
  border-radius: 11px;
  box-shadow: 0 0 5px rgba(118, 118, 118, 0.796);
  position: relative;
}

form h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  line-height: 45px;
  text-align: center;
  letter-spacing: 1px;
}

form div {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

form div input {
  width: 250px;
  height: 38px;
  border: none;
  margin: 17px 0px;
  outline: none;
  background: none;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  border-bottom: 1px solid #4444;
  letter-spacing: 0.5px;
}

form div button {
  right: 28px;
  bottom: 44px;
  width: 55px;
  height: 30px;
  background: none;
  border: none;
  position: absolute;
  cursor: pointer;
  font-size: 13.6px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  letter-spacing: 0.6px;
  color: rgb(91, 118, 177);
}

form #enviar {
  left: 50%;
  width: 100px;
  height: 30px;
  border-radius: 5px;
  border: none;
  background: rgb(17, 17, 17);
  color: white;
  font-size: 17.5px;
  letter-spacing: 1px;
  position: absolute;
  cursor: pointer;
  transform: translate(-51%);
}
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
  <form id="formulario">
    <h3>Show Password</h3>
    <div class="password">
      <input type="text" name="username" placeholder="Nombre de usuario" autocomplete="off" />
      <input id="password" type="password" name="contraseña" placeholder="Contraseña" autocomplete="off" />
      <button id="showPassword" type="button">mostrar</button>
    </div>
    <input id="enviar" type="button" value="Enviar" />
  </form>
</body>

</html>

2
  • Amigo muchas gracias de verdad
    – Enrique
    Commented el 26 ene. 2022 a las 23:18
  • @Enrique no hay de que :).
    – Daniel
    Commented el 26 ene. 2022 a las 23:24
0

El código de la pregunta funciona bien, aunque podría ser el input, lo que no está, que le falte el ID.

<input type="password" id="clave">
  
<a href="#" onclick="mostrarContrasena()"> 
 <span id="lg" data-feather="eye">Botón</span> 
</a>


<script>
function mostrarContrasena(){ 
var tipo = document.getElementById("clave"); 

if(tipo.type == "password"){ 
tipo.type = "text"; 

}else{
 tipo.type = "password"; 
}

// var div1 = document.getElementById("atributo"); 
var align = document.getElementById('lg').getAttribute('data-feather'); }
</script>

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.