0

Estuve investigando y logré hacer una pequeña página, el problema viene cuando quiero mostrar un botón (es igual al de mostrar contraseña en facebook) que a su vez muestra otro (el de ocultar) con la función lenght justo al empezar a escribir la contraseña.
Intenté ocultar un div, incluso el botón mismo pero no pude hacerlo (no sé si interfiera la función mostrar/ocultar del botón mismo).
Tengo apenas de 4 a 5 días programando, por si ven inconsistencias en mi código. Gracias de antemano uwu.
Este es mi código:

function ocultar1(){
    if ($('#contraseña').val().length == 0) {
        document.getElementById("mostrar1").style.display = "none";
    } else {
        document.getElementById("mostrar1").style.display = "block";
    }
}
function mostrar(){
    $show=document.getElementById("contraseña");
    $show.type="text";
    $b2=document.getElementById("b2");
    $b2.type="button";
    $b2=document.getElementById("b1");
    $b2.type="hidden";
}
function ocultar(){
    $show=document.getElementById("contraseña");
    $show.type="password";
    $b2=document.getElementById("b2");
    $b2.type="hidden";
    $b2=document.getElementById("b1");
    $b2.type="button";
}
<!DOCTYPE html>
<html>
<body>
<div class="campo">
    <input type="password" placeholder= "Contraseña" name="contraseña" required="on" id="contraseña" class="contraseña">
    <div class="mostrar1">  
        <input type="button" value="MOSTRAR" class="mostrar" onclick="mostrar()" id="b1">
        <input type="hidden" value="OCULTAR" class="ocultar" onclick="ocultar()" id="b2"><br>
    </div>
</div>
</body>
</html>

0

1 respuesta 1

1

Un par de cosas, parece que en la funcion ocultar1 mezclaste código de jquery, pero no estas usando esa librería, puede que simplemente hayas visto el código para ver el largo de un input y te hayas topado con otra sintaxis. La forma de hacerlo sin la libreria es la siguiente:

function ocultar1(){
    var value =  document.getElementById("contraseña").value;
    console.log(value)
    if (value.length == 0) {
    document.getElementById("mostrar1").style.display = "none";
    } else {
    document.getElementById("mostrar1").style.display = "block";
    }
}

Te había faltado también asignarle el id a la etiqueta "mostrar1". Si entendí bien lo que quisiste hacer, tu idea es que el div que tiene los botones, desaparezca siempre que el input tenga 0 caracteres, en ese caso por default como el input va vacío debería tener ya el display en none.

Para que el input ejecute la función cada vez que su valor cambia debes usar la propiedad onkeyup igual que hiciste con los botones con la propiedad onclick, esta no es la mejor manera de hacerlo, es mejor usar addEventListener Finalmente, cuidado con la forma de crear las variables, capaz viste código en php, donde las variables empiezan con $, en javascript la sintaxis correcta es: var nombredelavariable = "valor".

Te dejo el código con lo cambios que te comenté, espero te sirva.

function ocultar1(){
    var value =  document.getElementById("contraseña").value;
    console.log(value)
    if (value.length == 0) {
    document.getElementById("mostrar1").style.display = "none";
    } else {
    document.getElementById("mostrar1").style.display = "block";
    }
}
function mostrar(){
    var show = document.getElementById("contraseña");
    show.type="text";
    var b2=document.getElementById("b2");
    b2.type="button";
    var b1=document.getElementById("b1");
    b1.type="hidden";
}
function ocultar(){
    var show = document.getElementById("contraseña");
    show.type="password";
    var b2=document.getElementById("b2");
    b2.type="hidden";
    var b1 =document.getElementById("b1");
    b1.type="button";
}
    <div class="campo">
                <input type="password" onkeyup="ocultar1()" placeholder= "Contraseña" name="contraseña" required="on" id="contraseña" class="contraseña">
                <div class="mostrar1" id ="mostrar1" style="display:none">  
                    <input type="button" value="MOSTRAR" class="mostrar" onclick="mostrar()" id="b1">
                    <input type="hidden" value="OCULTAR" class="ocultar" onclick="ocultar()" id="b2"><br>
                </div>
    </div>

1
  • Fue de gran ayuda tu comentario! Ya funciona mi página al 100%, está lista para publicarse :) Commented el 14 dic. 2020 a las 19:06

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.