Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
4
rated 0 times [  9] [ 5]  / answers: 1 / hits: 16842  / 6 Years ago, mon, october 1, 2018, 12:00:00

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!


More From » html

 Answers
48

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


[#53398] Wednesday, September 26, 2018, 6 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
blaisep

Total Points: 748
Total Questions: 95
Total Answers: 108

Location: Federated States of Micronesia
Member since Sun, May 16, 2021
3 Years ago
blaisep questions
Wed, Dec 16, 20, 00:00, 4 Years ago
Sun, Aug 16, 20, 00:00, 4 Years ago
Tue, Nov 12, 19, 00:00, 5 Years ago
Mon, Nov 11, 19, 00:00, 5 Years ago
;