jQuery Prompt for Password doesn't want to display

Question

$(document).ready(function() {
     $(document).display(none);
     
     var password =("You have just entered a private website. Please enter the password to access it!");
     if (password == "biology") {
      $(document).display();
     }
      else {
       window.location.replace("https://www.google.co.uk")
      };
    });

html {
     background-image: url("bg.jpg")
    }
    
    body {
     margin: 0 25%;
     background-color: #ccc;
    }
    
    nav li {
     padding-left: 5px;
     border: solid 5px #aaa;
    }
    
    nav ul {
     list-style-type: none;
     position: fixed;
     left: 9%;
     font-size: 36px;
    }
    
    nav a {
     color: #ccc;
     text-decoration: none;
    }
    
    article {
     background-color: white;
     border: white solid #c0c;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html lang="pl">
    
    <head>
     <title>Krystian Mikołajczyk</title>
     <link href="style.css" rel="stylesheet" type="text/css">
     <link href="jquery-2.1.1.js" type="text/javascript">
     <link href="pass.js" type="text/javascript">
    </head>
    
    <body>
    <header>
     <h1 align="center"><i>Krystian Mikołajczyk</i></h1>
    </header>
    
    <nav>
     <ul><i>
      <li><a href="#">Home</a></li>
      <li><a href="#">Uploads</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">Contact</a></li>
     </i></ul>
    </nav>
    
    <br>
    <br>
    <br>
    
    <article>
     <section>
      <h1>Recent Update</h1>
     </section>
    </article>
    
    </body>
    </html>

I was trying to make a website for myself that I can use anywhere any time and I wanted to protect it with a password, especially if I was going to have some downloads and uploads that I wanted to keep for myself.

The password is suppose to be "biology" because I would like my biology teacher to upload a pdf book for me during the development.

I don't know what I did wrong but the prompt message didn't want to come up and that's what I'm wondering about.

As an aside, a password protection system like this can be defeated by anyone who chooses to view the source of the website (since you've got the correct password in JavaScript which is available to any site visitor). Don't keep any sensitive information here! — Scott, Jan 26 '15 at 20:11
To add to @Scottie 's comment, Javascript can be disabled and modified, there are many ways to circumvent your basic protection system. If you want something more secure, use PHP or another server-side language. — Drown, Jan 26 '15 at 20:15

Jonast92 · Accepted Answer · 2015-01-26T20:27:07.900

1

tl;dr

You got some errors in your code. Go to straight to working demo.

.display(none) is invalid

$(document).display(none);

This is invalid since none is not a defined variable, either remove it or use an alternative:

$(document).css('display', 'none');

or

$(document.body).hide();

You need to prompt the user

var password = ("You have just entered a private website. Please enter the password to access it!");

This will not do anything, but you can use the prompt method to ask for an input:

var password = prompt("You have just entered a private website. Please enter the password to access it!");

If-else statements should not contain semicolons (;)

else {
    window.location.replace("https://www.google.co.uk")
};

should simply be:

else {
    window.location.replace("https://www.google.co.uk")
}

There might be more!

Check your developer tools to be certain. They're awesome!

Note

... that you're no way near being safe since your password is stored as plain text and easily found by viewing the source of the client. There's a lot of material on how to hash password properly, store them and compare them with a hashed input value of the user -- but that's another story.

edited Jan 26 '15 at 20:27

answered Jan 26 '15 at 20:10

Jonast92

4,964
1
18
32

Still doesn't work :( The prompt doesn't want to appear at all and the body doesn't want to hide at all :( Just two more things: 1 Thx for the advice on password but I'm guessing I don't want it that much protected 2 when I was copying and pasting the code I was messing about with it but I can tell you that I did actually insert the "prompt" so that was my mistake Thx – Krystian Mikołajczyk Jan 28 '15 at 17:52
@KrystianMikołajczyk Did you take a look at the demo? – Jonast92 Jan 29 '15 at 07:55
Yes I have and the code down there works, but I don't know what's wrong with my browser, it just simply opens up the document even though I have corrected all the errors :( – Krystian Mikołajczyk Jan 29 '15 at 17:31
@KrystianMikołajczyk Which browser? What does your console say in your developer tools? – Jonast92 Jan 29 '15 at 18:02
Tried it in both chrome, opera and internet explorer, on the demo, the one that You did worked all fine, but on my computer it doesn't pop up, I even tried to host in on a sub-domain and nothing happens, just as if the jQeury wasn't linked to it. – Krystian Mikołajczyk Jan 30 '15 at 19:41

Paul Roub · Answer 2 · 2015-01-26T20:13:16.287

$(document).display(none);

You mean $(document).css('display', 'none');. But really:

$(document.body).hide();

Since the document object can't be hidden, and hide() is just more readable.

You set password to a long string:

var password =("You have just entered a private website. Please enter the password to access it!");

So it will never equal "biology". I believe you mean to say:

var password = prompt("You have just entered a private website. Please enter the password to access it!");

And finally,

$(document).display();

should be:

$(document.body).show();

  $(document.body).hide();

  var password = prompt("You have just entered a private website. Please enter the password to access it!");
  if (password == "biology") {
    $(document.body).show();
  } else {
    window.location.replace("https://www.google.co.uk")
  };

html {
  background-image: url("bg.jpg")
}
body {
  margin: 0 25%;
  background-color: #ccc;
}
nav li {
  padding-left: 5px;
  border: solid 5px #aaa;
}
nav ul {
  list-style-type: none;
  position: fixed;
  left: 9%;
  font-size: 36px;
}
nav a {
  color: #ccc;
  text-decoration: none;
}
article {
  background-color: white;
  border: white solid #c0c;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
  <h1 align="center"><i>Krystian Mikołajczyk</i></h1>
</header>

<nav>
  <ul><i>
  <li><a href="#">Home</a></li>
  <li><a href="#">Uploads</a></li>
  <li><a href="#">Downloads</a></li>
  <li><a href="#">Contact</a></li>
 </i>
  </ul>
</nav>

<br>
<br>
<br>

<article>
  <section>
    <h1>Recent Update</h1>
  </section>
</article>