basically I am trying to create a student profile based on students data stored in javascript arrays . after login successful i want to display user name (who logged in )on student html page called s1.html , i created a function called stu_verfiy when i get the value of input and store in variable and the use them to match with array element for login authentication , then i try to track the index student name and password in an array so that i used it to display the student name on html file it doesn'work
const students_names = [
"moiz",
"John",
"Adam",
"Walter",
"Jesse",
"Charlie"
];
const students_ids = [
"Johnnyboy15",
"Adaman42",
"Wally63",
"Jessthemesh74",
"Charles05"
];
const students_passwords = [
"moiz",
"jo63@greenvalleytechschool",
"Ada14@greenvalleytechschool",
"Walt002@greenvalleytechschool",
"jesh11@greenvalleytechschool",
"char227@greenvalleytechschool"
];
var x ;
function verify_stu()
{
var stu_name = document.getElementById('stu_name').value;
var stu_password = document.getElementById('stu_pass').value;
for( x = 0 ; x <= students_names.length ; x++)
{
if(students_names[x] == stu_name && students_passwords[x] == stu_password)
{
document.getElementById('stu_namedd').innerHTML = students_names[x];
window.location.href='/views/s1.html';
break;
}
else
{
alert('unsuccessfull')
break;
}
}
}
i even try to return this value outside function it show me undefined , can anyone please help me out in this and guide me a better way to done this task , login is working perfectly but i am unable to get the data of the user who logged in currently
<div id="third_container">
<label id="stu_name_x">Name</label>
<label id="stu_namedd" ></label>
</div>
If I understand correctly, you have data for students (username, password, id) and you also have two input fields, one for entering a username and one for a password. With the click of a button, you want to check if there is a student based on the data entered in the input fields. If there is, it will be transferred to s1.html where you want the student's name to appear. If not, an alert message ('unsuccessfull') will be displayed.
If what I said is what you want to do, then I see 2 problems in your code.
Your for loop is this: for( x = 0; x <= students_names.length; x++). With the one you have done, an attempt is made to access the table in a position +1 of those it has. The solution is to write instead for( x = 0; x <= students_names.length - 1; x++) or for( x = 0; x < students_names.length; x++) so that you are within the size of the table.
Also the way you did it, the alert message ('unsuccessfull') will appear directly if the entered data does not match the first positions of the tables. This means that this alert will appear without having check the credentials with everything you have stored in the tables for each student.
A quick fix for this would be to do the following:
var x;
function verify_stu() {
var stu_name = document.getElementById("stu_name").value;
var stu_password = document.getElementById("stu_pass").value;
for (x = 0; x <= students_names.length - 1; x++) {
if (students_names[x] == stu_name && students_passwords[x] == stu_password) {
document.getElementById("stu_namedd").innerHTML = students_names[x];
window.location.href = "/views/s1.html";
break;
}
}
if (x === students_names.length) {
alert("unsuccessfull");
}
}
I hope i helped :)
You could achieve this by using localStorage (at least for the username as I would not recommend saving the password). The user logs in - and you save it to localStorage under the key "user", that way you will grab the same key every time but whoever is logged in locally their username is displayed.
So after you verify they used correct username/password you will then set localStorage and grab it
For example:
localStorage.setItem("user", stu_name)
//Then grab it
localStorage.getItem("user")