Having an issue with getting a register/ login form to work on HTML using localStorage. As part of my assignment, I cannot use databases or php even though these are easier. Specifically the issue is occurring during my submit function.

The syntax error ing back is "Identifier registerUser has already been declared", and highlights const reponse = processUser (username.value, password.value) in the console.

Here's my JavaScript code:

//setup form
window.addEventListener("DOMContentLoaded", setupForm);

function setupForm() {
    const form = document.getElementById("login");
    form.addEventListener("submit", handleSubmit);
}

//handle Submit
function handleSubmit(event) {
    event.preventDefault();

    const {
        Username,
        Password,
        login_type,
        result
    } = event.target;

    const processUser = login_type.value == "register" ? registerUser : loginUser;
    const response = processUser(username.value, password.value);
    result.innerHTML = response;
}

//register new user
function registerUser(username, password) {
    window.localStorage.setItem("username", username);
    window.localStorage.setItem("password", password);

    return 'New user ${username} now registered!';
}

//login existing user
function loginUser(username, password) {
    const registeredUser = window.localStorage.getItem("username", username);
    const registeredUser = window.localStorage.getItem("password", password);

    const validUser = username == registeredUser;
    const validPassword = password == registeredUser;

    if (validUser && validPassword) {
        return 'User ${username} successfully logged-in!';
    }
    //error form for incorrect username or password
    else if (!validUser) return 'Incorrect username or password';
}

HTML form:

<fieldset>
    <form id="login" action="submit" method="post">
        <legend><b>Login here!</b></legend><br />
        <div>
            <label for="username">Username:</label>
            <input id="username" type="text" name="username" required />
        </div>
        <div>
            <label for="password">Password:</label>
            <input id="password" type="password" name="Password" required />
        </div>
</fieldset>
<span>
    <input id="login" type="hidden" name="login_type" value="login" checked="checked"></input>
    <!--Hidden for the purposes of my script working-->
    <input type="submit" value="Submit" /><br /><br />
    <output name="result"></output>
    </fieldset>
</span>

Any help would be greatly appreciated as this is very frustrating!

Having an issue with getting a register/ login form to work on HTML using localStorage. As part of my assignment, I cannot use databases or php even though these are easier. Specifically the issue is occurring during my submit function.

The syntax error ing back is "Identifier registerUser has already been declared", and highlights const reponse = processUser (username.value, password.value) in the console.

Here's my JavaScript code:

//setup form
window.addEventListener("DOMContentLoaded", setupForm);

function setupForm() {
    const form = document.getElementById("login");
    form.addEventListener("submit", handleSubmit);
}

//handle Submit
function handleSubmit(event) {
    event.preventDefault();

    const {
        Username,
        Password,
        login_type,
        result
    } = event.target;

    const processUser = login_type.value == "register" ? registerUser : loginUser;
    const response = processUser(username.value, password.value);
    result.innerHTML = response;
}

//register new user
function registerUser(username, password) {
    window.localStorage.setItem("username", username);
    window.localStorage.setItem("password", password);

    return 'New user ${username} now registered!';
}

//login existing user
function loginUser(username, password) {
    const registeredUser = window.localStorage.getItem("username", username);
    const registeredUser = window.localStorage.getItem("password", password);

    const validUser = username == registeredUser;
    const validPassword = password == registeredUser;

    if (validUser && validPassword) {
        return 'User ${username} successfully logged-in!';
    }
    //error form for incorrect username or password
    else if (!validUser) return 'Incorrect username or password';
}

HTML form:

<fieldset>
    <form id="login" action="submit" method="post">
        <legend><b>Login here!</b></legend><br />
        <div>
            <label for="username">Username:</label>
            <input id="username" type="text" name="username" required />
        </div>
        <div>
            <label for="password">Password:</label>
            <input id="password" type="password" name="Password" required />
        </div>
</fieldset>
<span>
    <input id="login" type="hidden" name="login_type" value="login" checked="checked"></input>
    <!--Hidden for the purposes of my script working-->
    <input type="submit" value="Submit" /><br /><br />
    <output name="result"></output>
    </fieldset>
</span>

Any help would be greatly appreciated as this is very frustrating!

• javascript
• html

• 1 Is there more JS code? – Paul McLoughlin Commented Oct 1, 2018 at 12:38
• Your code is inplete, please share more JS code – Fcmam5 Commented Oct 1, 2018 at 12:41
• Added the plete JS code – Matthew Commented Oct 1, 2018 at 12:42
• Could you please indent the code properly? It's very hard to read. – Bergi Commented Oct 1, 2018 at 12:48
• The error message seems to be pointing to the wrong line, for some reason. It should point out the duplicate const registeredUser = – Bergi Commented Oct 1, 2018 at 12:49

2 Answers 2

2 variables have the same name already registeredUser.

const registeredUser        = window.localStorage.getItem("username", 
username);
const registeredUser        = window.localStorage.getItem("password", 
password);

So rather than try to use registeredUser, i've changed it to registeredPassword

//login existing user
function loginUser(username, password){

const registeredUser        = window.localStorage.getItem("username", 
username);

const registeredPassword      = window.localStorage.getItem("password", 
password);

const validUser                 = username === registeredUser;
const validPassword         = password === registeredPassword;

Also use=== instead of == reasons why

you declared the identifier two times:

const registeredUser        = window.localStorage.getItem("username", 
username);
const registeredUser        = window.localStorage.getItem("password", 
password);