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')">
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!
You can use the focus event to see when the users comes back to your page:
var didEnterPassword = false;
window.addEventListener("focus", function(e){
if(!didEnterPassword && prompt("hello again") == "my secret password"){
didEnterPassword = true;
}
})
Keep in mind though that this is incredibly insecure since anyone can get my secret password when they start digging in your code.
You can use a while loop which keeps running as long as the user hasn't sent their answer:
var pwd;
while(pwd == null) pwd = prompt(title);
Note that it will not preserve any text entered before the focus was lost.
Related
I am working on some basic JavaScript.
I have a muse website and I'm using this script so users can enter a specific password and be redirected to a page, I need to be able to change this so I can do this multiple times, so: multiple passwords going multiple places.
For example, when users click a button they are asked for a password, when they enter CUSTOMPASSWORD1 they will be redirected to mywebsite.com/custompassword1.html how would I edit this script so that they could also type in CUSTOMPASSWORD2 and be redirected to mywebsite.com/custompassword2.html?
Script below:
<SCRIPT>
function passWord() {
var testV = 1;
var pass1 = prompt('Enter Store Code Here',' ');
while (testV < 3) {
if (!pass1)
history.go(-1);
if (pass1.toLowerCase() == "CUSTOMPASSWORD1234") {
alert('You are being redirected!');
window.open('CUSTOMPASSWORD1234.html');
break;
}
testV+=1;
var pass1 =
prompt('Access Denied - Store Code Not Recognised, Please Try Again.','Password');
}
if (pass1.toLowerCase()!="password" & testV ==3)
history.go(-1);
return " ";
}
</SCRIPT>
<CENTER>
<FORM>
<input type="button" value="Enter Store Code" onClick="passWord()">
</FORM>
</CENTER>
I believe what you are trying to do is simply redirect the user to whichever url they enter in the prompt.
To achieve that, we can use a similar approach:
function redirect() {
var pass1 = prompt('Enter Store Code Here', ' ');
if (!pass1) {
history.go(-1);
} else {
alert('You are being redirected!');
window.open(pass1 + '.html');
}
}
<center>
<form>
<input type="button" value="Enter Store Code" onClick="redirect()">
</form>
</center>
I'm not sure I entirely understand the question, I think you could just do this:
<SCRIPT>
function passWord() {
var testV = 1;
var pass1 = prompt('Enter Store Code Here',' ');
while (testV < 3) {
if (!pass1)
history.go(-1);
if (pass1.toUpperCase() == "CUSTOMPASSWORD1234") {
alert('You are being redirected!');
window.open('CUSTOMPASSWORD1234.html');
break;
}
else if (pass1.toUpperCase() == "CUSTOMPASSWORD2"){
window.open('CUSTOMPASSWORD2.html');
break;
}
testV+=1;
var pass1 =
prompt('Access Denied - Store Code Not Recognised, Please Try Again.','Password');
}
if (pass1.toLowerCase()!="password" & testV ==3)
history.go(-1);
return " ";
}
</SCRIPT>
<CENTER>
<FORM>
<input type="button" value="Enter Store Code" onClick="passWord()">
</FORM>
</CENTER>
You also have what I assume is an error with
(pass1.toLowerCase() == "CUSTOMPASSWORD1234")
since this will never evaluate to true since CUSTOMPASSWORD1234 is upper case. Also you don't have an evaluation for CUSTOMPASSWORD1.
It seems like you're lacking in basic JS and programming knowledge so I'd recommend reading some basic tutorial in programming concepts before you start building stuff. Just hacking together tutorials will make spaghetti code and you won't learn.
Trent's answer is better design which you should use, this answer is just how to specifically implement what you are asking for.
I am trying to make a basic program to run on a html page. It gives you an answer after clicking a button and inputing something and looks like:
<button type="button" onclick="whatsong()">Click to enter a song</button>
<p id="result"></p>
<script>
function whatsong() {
var song = prompt("please enter a song");
if (song = "example") {
document.getElementById("result").innerHTML = "yes";
}
if (song = "example2") {
document.getElementById("result").innerHTML = "no";
}
</script>
I want the variable song to reset so that the user could enter a song that prints no onto the webpage, then press the button again and enter a song that would yield a yes, without it still displaying no', like it does at the moment, and instead printing yes.
UPDATE: http://istyjorapping.atwebpages.com/ is the actual webpage, and it has multiple options per if (e.g.
if (song == "heavydirtysoul", "ode to sleep", "fake you out", "forest")
{ document.getElementById("result").innerHTML = "yes";
}), and any suggestions i have tried so far have made it give some strange results that the debugger i normally use can't work out.
You need to use ==(Equality) or ===(Identity) operator instead of =(assignment)operator
function whatsong() {
var song = prompt("please enter a song");
if (song == "example"){
document.getElementById("result").innerHTML = "yes";
}
if (song == "example2"){
document.getElementById("result").innerHTML = "no";
}
}
A good read Which equals operator (== vs ===) should be used in JavaScript comparisons?
<button type="button" onclick="whatsong()">Click to enter a song</button>
<p id="result"></p>
<script>
function whatsong() {
var song = prompt("please enter a song");
if (song == "example") {
document.getElementById("result").innerHTML = "yes";
}
if (song == "example2") {
document.getElementById("result").innerHTML = "no";
}
}
</script>
So as i have understood, on the click of a button you want to take a user input and based on the user input you want to display a particular text.
Below is the sample code for that
HTML
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click Me</button>
<p id="result"></p>
JS will be
function myFunction() {
var song = prompt("please enter a song");
if(song==='example'){
document.getElementById("result").innerHTML = "yes";
}
if(song==='example2'){
document.getElementById("result").innerHTML = "no";
}
}
I HOPE THIS HELPED. LET me know if you liked the solution. There can be many multiple ways too.
I was renovating my website while I came across this error.
It is a simple username-password Javascript calling function.
Here is the code (because of confidentiality I would not like to give out any usernames, passwords, links, or function names):
<head>
<script>
function ----() {
var username = prompt("Please enter your username.");
if (username.toLowerCase() == "-----"){
var password = prompt("Please enter your password.");
if (password.toLowerCase() == "-----"){
window.open('http://example.com',"_self")
}
else{
alert('Incorrect password. Please try again.')
}
}
else{
alert('Incorrect username. Please try again.')
}
}
</script>
</head>
<body>
<p><a onclick="----()" href="javascript:void(0);">------</a></p>
</body>
Please don't criticize my code; I've only been coding for 1~2 years. I would love to learn more from this renovating experience!
Thanks!
Jefferson Yu
You have redundant else statements. I have added a sample function called foo to explain. Try to adapt indentation in your code, that will save you from creating syntactical errors.
<html>
<head>
<script>
function foo() {
var username = prompt("Please enter your username.");
if (username.toLowerCase() == "user"){
var password = prompt("Please enter your password.");
if (password.toLowerCase() == "pass"){
window.open('http://example.com',"_self");
}
}
else{
alert('Incorrect password. Please try again.');
}
}
</script>
</head>
<body>
<p><a onclick="foo()" href="javascript:void(0);">click me</a></p>
</body>enter code here
</html>
I need to put a password protect in one my page. But I want it in a way that when the user click on a menu in my navigation, example is "Gallery", I want an alert box, saying "Enter password to view content" I have used the code below, but it still need to have a button and I don't want that.
P.S. And I prefer to use javascript and html only.
function passWord() {
var testV = 1;
var pass1 = prompt('Enter password to view content',' ');
while (testV < 3) {
if (!pass1)
history.go(-1);
if (pass1.toLowerCase() == "123456789") {
alert('You Got it Right!');
window.open('/gallery');
break;
}
testV += 1;
var pass1 = prompt('Access Denied - Password Incorrect, Please Try Again.','Password');
}
if (pass1.toLowerCase()!="password" & testV == 3){
history.go(-1);
return " ";
}
}
Passwords in javascript are trivial to circumvent, and in this case, they could find the password by looking at the source.
Having said that, you could trigger your code by using onclick - <div class="mymenu" onclick="password();">
EDIT:
Also, (!pass1) is invalid syntax, did you mean (pass==null)?
I'm new to js and I have this very simple code. It's supposed to be a login, and it's not working. I don't need any tips on making it better, I'm planning to do that when this starts to work.
<!DOCTYPE html>
<head> Sign-in </head>
<body>
<script type="text/javascript">
var em = prompt("Enter E-mail Here:")
if(em = "I hid this to prevent spam"){
var pa = prompt("Enter Password Here:")
if(pa = "jct28if5"){
alert("Welcome!")
}
else{
alert("Incorrect password!")
}
}
else {
alert("Invalid e-mail!")
}
</script>
</body>
</html>
What it's doing now is no matter what, it thinks that the correct e-mail and password were used. Could somebody help?
I've fixed your code up a bit. Some things to note.
You can't just put raw content in the <head>.
Your password is in the raw source of the page, so anyone can view the page source and see what the correct password is. That's an absolutely horrible design. Passwords should be passed to server side where they're checked for validity.
In C like programming language such as Javascript, == tests for equality and will return a boolean. The = sign assigns a value to a variable.
<!DOCTYPE html>
<head>
<title>Sign-in
</title>
<script type="text/javascript">
var em = prompt("Enter E-mail Here:")
if(em == "I hid this to prevent spam"){
var pa = prompt("Enter Password Here:")
if(pa == "jct28if5"){
alert("Welcome!")
}
else{
alert("Incorrect password!")
}
}
else {
alert("Invalid e-mail!")
}
</script>
</head>
<body>
</body>
</html>
Just one addition:
== checks value
=== checks value and type
Someone who deactivates js or doesn't support it like curl/wget and others, will not be stopped by this, except you load the whole website with js, what might be stupid cause of search engines might not index the content though.
Hope this helps.
fixed
var em = prompt("Enter E-mail Here:")
if(em === "I hid this to prevent spam"){
var pa = prompt("Enter Password Here:")
if(pa === "jct28if5"){
alert("Welcome!")
}
else{
alert("Incorrect password!")
}
}
else {
alert("Invalid e-mail!")
}
You use a single = when you're assigning a variable a value. like var x = 1.
But if you want to check equality, use ===. like if(x ===1)