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.
2 answers
solution1
1 ACCPTED 2015-01-26 20:10:05
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.
solution2
0 2015-01-26 20:11:03
$(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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.