Search code examples
javascriptfunctionpromptpassword-protection

JavaScript prompt window disappears when navigating to other tab

I have written following snippet to enable password on my site, but if I navigate to different tab on the browser, the password prompt disappears and this feature is not useful anymore. 

 function passWord(title) {

       var pwd = prompt(title);

       switch (pwd) {
         case '2017': true;
           break;

         case null: passWord('Access Denied - Password Incorrect, Please Try Again.');
           break;

         default: passWord('Access Denied - Password Incorrect, Please Try Again.');
       }
     }

I am calling this function in body tag. 

   <body onload="passWord('Please enter password here')">
Solution

  • You can try this method:

    <style>#screen {display: none;}</style>
<body onload="passWord();">
  <div id="welcome">
    <h1>Welcome Page</h1>
  </div>
  <div id="screen">
    <h1>Unique Page</h1>
  </div>
  <script>
    function passWord() {
      var welcome = document.getElementById("welcome");    
      var screen = document.getElementById("screen");
      var pwd = prompt("Enter your password", "TYPE HERE");
      switch(pwd) {
        case "2017":
          screen.style.display = "block";
          welcome.style.display = "none";
        break;
        default:
          screen.style.display = "none";
          welcome.style.display = "block";
      }
    }
  </script>
</body>

    As @Caleb Black comment - It's better using php for this things if security matter. Good Luck!