Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <script>
var usernames = ['kevin','balboa','ScriptEd'];
var passwords = ['dou', '12345','hunter2'];

$("#reg").click(function() {
    var user = $("#un").val();
    var pass = $("#pw").val();
    if (user === "") {
        $("#message").html("Please fill in a username");
    } else if (pass === "") {
        $("#message").html("Please fill in a password");
    } else {
        if (usernames.includes(user)) {
            $("#message").html("Username already taken");
        } else {
            usernames.push(user);
            passwords.push(pass);
            $("#message").html("Registered " + user);

        }
    }
});

$("#login").click(function() {
    var user = $("#un").val();
    var pass = $("#pw").val();
    if (user === "") {
        $("#message").html("Please fill in a username");
    } else if (pass === "") {
        $("#message").html("Please fill in a password");
    } else {
        if (usernames.includes(user)) {
            for (var i=0; i<usernames.length; i++) {
                if (usernames[i] === user) {
                    if (passwords[i] === pass) {
                        $("#message").html("Logged in!");
                    } else {
                        $("#message").html("Wrong Password!");
                    }
                }
            }

        } else {
            $("#message").text(user + " does not exist");
        }
    }
});
    </script>
    <body>
        <h1>Register</h1>
        <input id="un" placeholder="username">
        <input id="pw" placeholder="password"><button id="reg">Register</button>
        <button id="login">Login</button>
        <p id="message"></p>
    </body>
</html>