0

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>&nbsp;</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>

1 respuesta 1

2

Hice algunas modificaciones, pero creo que logra el resultado que indicás con menos código. (El while no es necesario, porque cada vez que das al botón llamás a la función, no es necesario tener un loop) Al llamar a la función solo verificamos las condiciones y ejecutamos lo deseado.

Hice cambios solo en el archivo JavaScript, quedaría así:

//Control de acceso
let i = 3; //valor inicial para el número de intentos

function pwcheck() {
  const contrasena = document.getElementById("caja").value;
  const campoMensaje = document.getElementById("mensaje");

  if (contrasena === "acceso" && i > 0) {
    campoMensaje.innerHTML = "";
    location.href = "okpass.html";
  } else if (contrasena !== "acceso" && i >= 1) {
    i--;
    //Volcamos el error en la caja de aviso
    campoMensaje.innerHTML = "Error de acceso, te quedan " + i + " intentos";
    document.getElementById("caja").value = "";
    document.getElementById("caja").focus();
  }
}

Tal cual dice el comentario, si se desea que esto permanezca bloqueando o descontando incluso si se recarga la página, podrías escribir el valor de la variable en localStorage y leerlo desde ahí. Lo idea sería que ese valor venga desde un server.

Aquí podrás leer sobre localStorage con ejemplos prácticos: https://developer.mozilla.org/es/docs/Web/API/Window/localStorage

Te dejo un ejemplo de tu código con localStorage, cree algunas funciones y moví alguna cosa para no repetir tanto código o tan largo.

// Capturo el campo de mensaje y el campo de contraseña(caja)
const campoMensaje = document.getElementById("mensaje");
const caja = document.getElementById("caja");

// Creo función para obtener resultado desde localStorage
function getCounter() {
  return localStorage.getItem("contador");
}
//Creo función para escribir el valor del contador en localStorage, solo necesita recibir valor como arg.
function setCounter(value) {
  return localStorage.setItem("contador", value);
}

//Declaro estado de contador inicial si no existe y si existe devuelvo mensaje con la cantidad de intentos restantes.
if (!getCounter()) {
  setCounter(3);
  campoMensaje.innerHTML = "";
} else {
  campoMensaje.innerHTML =
    "Error de acceso, te quedan " + getCounter() + " intentos";
}

function pwcheck() {
  const contrasena = caja.value;
  const i = getCounter();
  if (contrasena === "acceso" && i > 0) {
    campoMensaje.innerHTML = "";
    setCounter(3); // reseteo contador
    location.href = "okpass.html";
  } else if (contrasena !== "acceso" && i >= 1) {
    setCounter(getCounter() - 1);
    //Volcamos el error en la caja de aviso
    campoMensaje.innerHTML =
      "Error de acceso, te quedan " + getCounter() + " intentos";
    caja.value = "";
    caja.focus();
  }
}

Si quieres volver a iniciar de cero la cuenta esto sucede cuando el usuario se loguea correctamente o cuando borras manualmente localStorage.

6
  • 1
    Esta linea no parece funcionar bien: document.getElementById("caja").focus().value = ""; y si lo que quiere es que ni recargando la página puedan reintentarlo quizás almacenaria los intentos en una variable dentro del localStorage para dificultarles más la cosa :-)
    – masterguru
    Commented el 26 dic. 2021 a las 21:34
  • Perdona que insista pero document.getElementById("caja").focus().value = ""; me muestra un error en consola. Supongo que debes cambiarlo por document.getElementById("caja").focus();
    – masterguru
    Commented el 27 dic. 2021 a las 1:43
  • 1
    Es correcto, perdón, lo arreglé en el segundo ejemplo, pero no en el primero, ya lo arreglo, el resto debería estar funcionando, lo que hacemos ahí es primero dejar el contenido en blanco y luego dejar el foco en el input, entonces lo que tu mencionas es correcto. Favor marcar respuesta como correcta dandole al visto al costado de la respuesta si sirvió para resolver, sirve para la reputación y para que otros sepan que funciona. Muchas Gracias Commented el 27 dic. 2021 a las 1:44
  • Fenomenal, así me sirve!!, gracias! Mi error era estar empeñado en seguir empleando el bucle while cuando llamo a la función con un botón. Pues nada había valorado cambiar el script a un if, pero me emperrao, me emperrao... y era de cajón. ¡Gracias de nuevo!
    – user264070
    Commented el 27 dic. 2021 a las 19:51
  • 1
    @user264070: Si esta respuesta da solución a tu pregunta marcala como aceptada para que la comunidad lo sepa y no quede pendiente eternamente, gracias. Mírate ¿Qué debo hacer cuando alguien contesta mi pregunta?
    – masterguru
    Commented el 27 dic. 2021 a las 20:03

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.