i found and edited this code from this website for practice but the code wont work with me. the goal of the code is to create a username and password on one page (which for now is limited to premade usernames and passwords) and send that array of information to another page where you can log in using the username and password from the other page. the code looks fine to me but i am an amateur and want to know what is wrong with it. thank you for your answer.
the code for where the username and password are defined is:
<!DOCTYPE html>
<html>
<head>
<title>
create account
</title>
<script>
sessionStorage.setItem("unArray", JSON.stringify("bob", "sam"));
sessionStorage.setItem("pwArray", JSON.stringify("lol", "jk"));
</script>
</head>
<body>
</body>
</html>
the code for taking the already created username and password from the above page and using that for a log in page is this:
<!DOCTYPE html>
<html>
<head>
<title>
log on page
</title>
<script type = "text/javascript">
var count = 2;
function validate() {
var un = document.getElementById("username").value;
var pw = document.getElementById("pword").value
var valid = false;
var unArray = JSON.parse(sessionStorage.getItem("unArray"));
var pwArray = JSON.parse(vsessionStorage.getItem("pwArray"));
for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}
if (valid) {
alert ("Login was successful");
window.location = "http://www.google.com";
return false;
}
var t = " tries";
if (count == 1) {t = " try"}
if (count >= 1) {
alert ("Invalid username and/or password. " +
"You have " + count + t + " left.");
document.myform.username.value = "";
document.myform.pword.value = "";
setTimeout("document.myform.username.focus()", 25);
setTimeout("document.myform.username.select()", 25);
count --;
}
else {
alert ("Still incorrect! You have no more tries left!");
document.myform.username.value = "No more tries allowed!";
document.myform.pword.value = "";
document.myform.username.disabled = true;
document.myform.pword.disabled = true;
return false;
}
}
</script>
<style>
p.log_on{
position: fixed;
top: 30px;
left: 20px;
}
</style>
</head>
<body>
<form name = "myform">
<p class="log_on">
ENTER USER NAME <input type="text" id="username"><br><br><br><br><br>
ENTER PASSWORD <input type="password" id="pword">
<input type="button" value="Check In" id="Submit" onclick="validate()">
</p>
</form>
</body>
</html>
1 Answer 1
The following two lines:
sessionStorage.setItem("unArray", JSON.stringify("bob", "sam"));
sessionStorage.setItem("pwArray", JSON.stringify("lol", "jk"));
are not using the JSON.stringify function correctly.
They should be:
sessionStorage.setItem("unArray", JSON.stringify(["bob", "sam"]));
sessionStorage.setItem("pwArray", JSON.stringify(["lol", "jk"]));
See the following link for reference: Mozilla Developer Network.
Per the documentation, the JSON.stringify parameters are defined as the following:
Syntax
JSON.stringify(value[, replacer [, space]])Parameters
value- The value to convert to a JSON string.
replacer(Optional) - If a function, transforms values and properties encountered while stringifying; if an array, specifies the set of properties included in objects in the final string. A detailed description of the replacer function is provided in the JavaScript guide article Using native JSON.
space(Optional) - Causes the resulting string to be pretty-printed.
sessionStorage.setItem("unArray", JSON.stringify( ["bob", "sam"] ));vsessionStorageinstead ofsessionStorage. Just correct that.