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>