I am a JavaScript (and an overall programming) newbie, and this is one of my first exercices. I have to do a login page, where the user has to type in an already existing username and password, which are saved in two different arrays (one for the usernames and one for the passwords):

const users=["java", "visual", "personal", "key", "master"]
const passwords=["script", "studio", "computer", "board", "chief"];

Once the user clicks a "submit" button, the website tells him if the login was successful or not (if the credentials typed in exist or not). The problem is that when the button is clicked, nothing happens: in the code, it should check if the credentials typed in by the user match with the existing ones in the arrays AND with their positions, but it doesn't, and I don't understand why. The code is pasted below. JS function:

function login(){
    const a=document.getElementById("usn").value;
    const b=document.getElementById("psw").value;

    for(var i=0; i<users.length; i  ){
        for(var j=0; j<passwords.length; i  ){
            if(users.indexOf(a)==passwords.indexOf(b)){
                if(users[i].includes(a) && passwords[j].includes(b)){
                    var suc=document.getElementById("success");
                    suc.innerHTML="Login successful";
                    suc.style.backgroundColor="green";
                }
                else{
                    var fail=document.getElementById("fail");
                    fail.innerHTML="Login failed, user not registered";
                    fail.style.backgroundColor="red";
                }
            }
            else
                continue;
        }
    }
}

HTML (if needed):

<div >
            <p >Login</p>
            <p >Don't have an account yet? <span>Create yours now</span>, it takes just a few seconds.</p>
            <div id="fail" ></div>
            <div id="success" ></div>
            <br>
            <div>
                <p >Username</p>
                <div>
                    <input type="text"  id="usn" onclick="switchColors()">
                </div>
            </div>
            <br>
            <div>
                <p >Password</p>
                <div>
                    <input type="text"  id="psw" onclick="switchColors()">
                    <i  id="eye2" onclick="change()"></i>
                    <i  id="eye1" onclick="change()"></i>
                </div>
            </div>
            <br>
            <button type="button"  id="btn" onclick="login()">Login</button>
        </div>
    </div>

CSS (if needed):

.inf{
    border: none;
    outline: none;
    border-bottom: 1px solid black;
}

.hidden{
    display: none;
}

Note: this is an exercise for school to be made ONLY for learning purposes.

CodePudding user response：

Maybe like This:

  const users=["java", "visual", "personal", "key", "master"]
  const passwords=["script", "studio", "computer", "board", "chief"];

  function login(){
    const a=document.getElementById('usn').value;
    const b=document.getElementById('psw').value;
    var inxa = users.indexOf(a);
    var inxb = passwords.indexOf(b);
    if(inxa < 0){
      console.log('Login not found...');
    }else if(inxb < 0 || inxa !== inxb){
      console.log('Password incorrect...');
    }else{   /* (inxa > 0 && inxb > 0 && inxa === inxb) */
      console.log('You have successfully logged in');
    }
 }

   <div>Login:</div>
   <input type="text" id="usn">
   <div>Password:</div>
   <input type="text" id="psw">
   <br>
   <button type="button" onclick="login()">Login</button>

CodePudding user response：

There are so many ways to become the same result. Because you are leaning JS, this is another approach. I'll leave the rest of the code to you for learning ;-)

Note that (passwords[i] == psw) will return true or false

const usn = document.getElementById("usn").value;
const psw = document.getElementById("psw").value;

let success = false;
for (let i=0; i < users.length; i  ) {
  if (users[i] == usn) {
    success = (passwords[i] == psw);
  }
}

if (success) {
  // login success
} else {
  // login failed
}

CodePudding user response：

const users = ["java", "visual", "personal", "key", "master"];
const passwords = ["script", "studio", "computer", "board", "chief"];

function login() {
  const username = document.getElementById("usn").value;
  const password = document.getElementById("psw").value;

  const indexUsername = users.indexOf(username);
  const indexPassword = passwords.indexOf(password);

  if(indexUsername < 0){
    console.log("user not found")
  } else if (indexUsername === indexPassword) {
    const success = document.getElementById("success");
    success.innerHTML = "Login successful";
    success.style.backgroundColor = "green";
  } else {
    const fail = document.getElementById("fail");
    fail.innerHTML = "Login failed, user not registered";
    fail.style.backgroundColor = "red";
  }
}

Note: always try to use explicit names in your variables, functions, etc.