Quiero proteger la contraseña de mi sitio web html estático local con algunos js, de modo que cuando abra mi archivo html local en mi PC, venga con un formulario para completar mi identificación de usuario y mi propia contraseña, que he guardado y cuando Presioné enter que debería abrir mi archivo index.html solo cuando la contraseña sea correcta. actualmente mi código es
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <Form> <!-- user-id --> <input type="text"> <!-- user-password --> <input type="password"> <button onclick="window.open('./index.html')"> Enter </button> </Form> <script> // pls-help-me-idk-how-to-code-js </script> </body> </html> ``Primero, debe agregar una identificación o una clase a esas entradas para seleccionarlas dentro de la sección del script. Después, puede seleccionarlos y agregar cualquier valor que desee. Como:
<form> <!-- user-id --> <input id="user" type="text" /> <!-- user-password --> <input id="pass" type="password" /> <button onclick="window.open('./index.html')">Enter</button> </form> <script> document.getElementById("user").value = "UsernameOrId"; document.getElementById("pass").value = "SomePassword"; </script>Para comparar, debe obtener la contraseña correcta de algún lugar como una base de datos o algún servicio, pero dado que esto es puramente para fines de aprendizaje, puede codificarla en el script para verificar. Entonces, la solución final puede ser similar a esto:
<body> <form> <!-- user-id --> <input id="user" type="text" /> <!-- user-password --> <input id="pass" type="password" /> <button id="btn">Enter</button> </form> <script> const myPass = "SomePassword"; document.getElementById("user").value = "UsernameOrId"; // predefining the value simulating is saved and by default filled up document.getElementById("pass").value = myPass; // predefining the value simulating is saved and by default filled up const btn = document.getElementById("btn"); // getting the button to control its behavior on click event btn.addEventListener("click", function () { const passWhenClickingTheBtn = document.getElementById("pass").value; if (myPass === passWhenClickingTheBtn) { // checking the value entered for pass window.open("./index.html"); } }); </script>No es una forma adecuada de hacerlo. Necesita un backend para eso para poder ejecutarlo correctamente. Pero si solo es para jugar, puede tener un cuadro de alerta y simplemente comparar su valor: si es correcto, se muestra.