I am creating a login system in HTML…I have Used written a piece of code but It dosn't seem to workup..requesting to please answer

Question

This is the code I had written but the If...Else statement doesn't seem to work (I have used MAPS here because I feel it easier{Please suggest if there's anything else that can be used to make it easier.}) I have attached my code for reference... awaiting response thanks in advance!!

<script>
function submit(){
 alert("hello");
 var username=document.getElementById("username");
 var password=document.getElementById("password");

var map = new Map();


map.set("Doctor_1","Doctor_Password.1");
map.set("Doctor_2","Doctor_Password.2");
map.set("Doctor_3","Doctor_Password.3");
map.set("Nurse_1","Nurse_Password.1");
map.set("Nurse_2","Nurse_Password.2");
map.set("Teaching_1","Teaching_Password.1");
map.set("Teaching_2","Teaching_Password.2");
map.set("Teaching_3","Teaching_Password.3");
map.set("Student_1","Student_Password.1");
map.set("Student_2","Student_Password.2");
map.set("Student_3","Student_Password.3");
map.set("Student_4","Student_Password.4");


if username in map {
  if password in map {
alert("password found");
}
else{
    alert("Wrong PASSWORD...");
}
}
else{
alert("Wrong USERNAME...");
}
</script>

Answer 1

Here's my modified version. Your description of what “doesn't seem to work” is not very specific, but I did notice you were missing a final brace.

If that wasn't your issue, you can review my comments below. Note that in your code username and password are elements and not strings, so you'll need to extract string values from them.

function submit() {
    alert("hello")
    
    /*
    username and password are DOM elements
    */
    var username = document.getElementById("username")
    var password = document.getElementById("password")

    var accounts = {
        Doctor_1: 'Doctor_Password.1',
        Nurse_1: 'Nurse_Password.1'
        //etc
    }

    if username in accounts {
        if password in Object.values(accounts) {
            // it is strange to check against everyone's passwords though
            alert("password found")
        }
        else if (accounts[username] == password) {
            // I added this option
            alert('username and password match!')
        }
        else {
            alert("Wrong PASSWORD...")
        }
    }
    else {
        alert("Wrong USERNAME...")
    }
} //this last brace was missing

Answer 2

You are mapping usernames to passwords. You should try something like this.

First, check if the map has username . If it does, then retrieve the password for that username using map.get(username) and compare it with the user-input. If it matches, you are good to go.

 function submit(){ var username = document.getElementById("U").value; var password = document.getElementById("P").value; var map = new Map(); map.set("Doctor_1","Doctor_Password.1"); map.set("Doctor_2","Doctor_Password.2"); map.set("Doctor_3","Doctor_Password.3"); map.set("Nurse_1","Nurse_Password.1"); map.set("alexa", "12345"); map.set("Nurse_2","Nurse_Password.2"); map.set("Teaching_1","Teaching_Password.1"); map.set("Teaching_2","Teaching_Password.2"); map.set("Teaching_3","Teaching_Password.3"); map.set("Student_1","Student_Password.1"); map.set("Student_2","Student_Password.2"); map.set("Student_3","Student_Password.3"); map.set("Student_4","Student_Password.4"); if (map.has(username)) { if (map.get(username) === password) { alert("Welcome;"); } else { alert("Wrong password;"); } } else { alert("Sorry!"); } }

 <input type="text" placeholder="Username" id="U"> <input type="text" placeholder="Password" id="P"> <button onclick="submit()">Submit</button>