0

he creado un fichero .js para mostrar y ocultar contraseña en un login de usuario. Lo he puesto en un button, con un onclick, para que cuando el usuario le de se oculte o se desoculte. El problema es que cuando le doy al botón no me hace nada y he mirado con el f12 y me sale el siguiente error:

Uncaught ReferenceError: mostrarContrasena is not defined at HTMLButtonElement.onclick.

Yo creo que el fichero de javascript es correcto, no sé si igual lo llamo mal desde el html. Adjunto código. El error me sale en el fichero .php cuando pongo el button y llamo con el onclick a la función del javascript. Si me podéis ayudar. Muchas gracias.

Este es mi fichero mostarContrasena.js

function mostrarContrasena() {
        var cambio = document.getElementById("ucontra");
        if (cambio.type == "password") {
            cambio.type = "text";
            $('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
        } else {
            cambio.type = "password";
            $('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');
        }
    }

Este es mi fichero login.php

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    
<script type="text/javascript" src="WebBurger/public/js/mostrarContrasena.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
</head>

<body>

<form action="../public/forms/login.php" method="post">
 <dl>
    <dt><label for="email">EMAIL</label></dt>
    <dd><input type="text" id="uemail" name="uemail" /></dd>
    <dt><label for="contrasena">CONTRASEÑA</label></dt>
    <button id="mostrar_contrasena" type="button" onclick="mostrarContrasena()"> <span class="fa fa-eye-slash icon"></span> </button>
    <dd><input type="password" id="ucontra" name="ucontra" /></dd>
                    
    <dd><input type="submit" name="ulogin" value="ENTRAR" /></dd>
 </dl>
</form>

</body>
    
</html>

3 respuestas 3

1

Verifica en inspector web que WebBurger/public/js/mostrarContrasena.js carga correctamente y que no contiene errores de sintaxis. Me parece extraño que tengas <form action="../public/ pero <script src="WebBurger/public/

0

Para que tu código funcione tienes que llamar antes a jQuery y después tu código:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="WebBurger/public/js/mostrarContrasena.js"></script>
0

Primero analicemos el error:

1. Uncaught ReferenceError: No encuentro la definición de esa variable o función.

2. at HTMLButtonElement.onclick: en este evento.

Un posible fallo seria la posición de las etiquetas script.

Se recomienda que las etiquetas script NO esten en el head sino al final del body.

Esto, porque HTML carga todo de principio a final. Primero el head, luego el body y luego todo lo que esta en el body.

Si tu pones el los links de javascript en el head, ese archivo se cargara completamente antes de que se cargue cualquiera de los elementos html, esto podría causar problemas como el tuyo, ya que, la función no estará definida para cuando cargas el documento.

Ademas de que, si utilizas jQuery, $("icon")... debes colocarlo ANTES de usar la librería, ya que, los ficheros se cargan en orden.

Por ultimo, verificar que la ruta del archivo sea la correcta.

El resultado final seria:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

    <form action="../public/forms/login.php" method="post">
        <dl>
            <dt><label for="email">EMAIL</label></dt>
            <dd><input type="text" id="uemail" name="uemail" /></dd>
            <dt><label for="contrasena">CONTRASEÑA</label></dt>
            <button id="mostrar_contrasena" type="button" onclick="mostrarContrasena()"> <span class="fa fa-eye-slash icon"></span> </button>
            <dd><input type="password" id="ucontra" name="ucontra" /></dd>
            <dd><input type="submit" name="ulogin" value="ENTRAR" /></dd>
        </dl>
    </form>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="WebBurger/public/js/mostrarContrasena.js"></script>

</body>

NOTAS:

  1. Te recomiendo cambiar el jQuery en linea por la descarga del fichero.

Tu Respuesta

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