CODEWITHSUNDEEP
javascripthtml
Matthew
Matthew

Reputation: 49

JavaScript - "Identifier has already been declared"

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 coming 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!

Upvotes: 4

Views: 17548

Answers (2)

Paul McLoughlin
Paul McLoughlin

Reputation: 2289

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

Upvotes: 2

codeneuss
codeneuss

Reputation: 905

you declared the identifier two times:

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

Upvotes: 0

Related Questions