Veréis, estoy un poco oxidado con la programación y me ha tocado la tarea de realizar una pequeña función con javascript donde mediante una caja de formulario de tipo texto con id="caja" se pide una contraseña (almacenada en el código) durante tres ocasiones:
Si la contraseña coincide y el número de intentos es menor que tres pues redirecciono a una página y si la contraseña no coincide y el numero de intentos es mayor o igual a tres pues muestro un mensaje de error en un div id="mensaje".
La cuestión es que según lo que he escrito sólo entra la primera vez en caso de error pero no vuelve a comprobar una segunda vez.
Si acierta con la contraseña si que va esa parte.
La verdad ya estoy desesperado, me da la impresión de que es una tontearía conceptual en relación al while que empleo para comprobar los tres intentos pero no doy con ella ¿me ayudáis?
¡Gracias!
Código de la función
//Control de acceso
//Control de acceso
function pwcheck() {
var contrasena; //variable que almacenara lo que escriba el usuario
var i=0; //valor inicial para el número de intentos
while(contrasena!="acceso" && i<3) {
contrasena=document.getElementById("caja").value;
//La caja que contiene el aviso de error la vaciamos para futuros volcados
document.getElementById("mensaje").innerHTML='';
//Volcamos el error en la caja de aviso
document.getElementById("mensaje").innerHTML='Error de acceso, te quedan '+ i +' intentos';
if (contrasena=="acceso") {
document.getElementById("mensaje").innerHTML='';
document.getElementById("caja").value='';
location.href="okpass.html";
}
else {
document.getElementById("caja").value='';
document.getElementById("caja").focus();
}
i++;
}
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Login de usuario</title>
<style type="text/css">
*{
font-family:Arial, Helvetica, sans-serif;
color:#333;
font-size: 100%;
}
main {
width: 600px;
height: 200px;
margin: 200px auto;
border: 1px red solid;
text-align: center;
border-radius: 4px;
}
h1 {font-size: 1.6rem;
margin:20px 0;}
input[type=text],input[type=text]:focus {
outline: none;
border: 0;
border-bottom: 1px solid black;
padding: 10px 10px;
color:darkgreen;
}
#mensaje{
color:red;
font-size: 1.2rem;
margin:20px 0;
}
</style>
<script src="password-2.js"></script>
</head>
<body>
<main>
<p> </p>
<h1>Escribe la contraseña de acceso</h1>
<input type="text" id="caja" autofocus>
<input type="button" value="Pulsa para acceder >>" onclick="pwcheck();">
<div id="mensaje"></div>
</main>
</body>
</html>