Trying to create a Button for a Create Account Component

Computer Science
1 
 <form id="createAccountForm">
    <input type="text" id="newUsername" placeholder="Username">
    <input type="password" id="newPassword" placeholder="Password">
    <button type="submit">Create Login</button>
</form>
<script src="createAccount.js"></script>

//js file
document.getElementById(‘createAccountForm’).addEventListener(‘submit’, function(event) {
event.preventDefault();

// Get username and password from the form
const usernameInput = document.getElementById(‘newUsername’).value;
const passwordInput = document.getElementById(‘newPassword’).value;
const username = usernameInput.value;
const password = passwordInput.value;

if (username && password ) {
// Set logged-in state in localStorage
localStorage.setItem(‘loggedIn’, ‘true’);
localStorage.setItem(‘username’, username);

//aleart popup with new users info

alert(New Username is ${username}. New Password is ${password}.);

// Clear the form fields
usernameInput.value = ‘’;
passwordInput.value = ‘’;

//locate user to home page
window.location.href = ‘index.html’;
} else {
alert(‘Please enter both username and password.’);
}
});

I can’t seem to retrieve my text values from my html file. The goal is to have these values pop up inside the alert message. The alert message within the else statement always comes up, but never the first alert.

3

Welcome bit9906868262.

It seems like you’re encountering an issue with retrieving the values of the username and password inputs from your HTML form. take a closer look at your JavaScript code:

document.getElementById(‘createAccountForm’).addEventListener(‘submit’, function(event) {
    event.preventDefault();

    // Get username and password from the form
    const usernameInput = document.getElementById(‘newUsername’).value;
    const passwordInput = document.getElementById(‘newPassword’).value;
    const username = usernameInput.value; // This line seems redundant
    const password = passwordInput.value; // This line seems redundant

    if (username && password) {
        // Set logged-in state in localStorage
        localStorage.setItem(‘loggedIn’, ‘true’);
        localStorage.setItem(‘username’, username);

        // Alert popup with new user's info 
        alert(`New Username is ${username}. New Password is ${password}.`);

        // Clear the form fields
        usernameInput.value = ‘’; // This line won't work, as usernameInput is already the value
        passwordInput.value = ‘’; // This line won't work, as passwordInput is already the value

        // Locate user to home page
        window.location.href = ‘index.html’;
    } else {
        alert(‘Please enter both username and password.’);
    }
});

Here are a few corrections:

  1. The use of incorrect quotes: You’re using ‘ and ’ quotes instead of regular single quotes '. Make sure to use straight quotes.
  2. Redundant lines: You’re already getting the values of username and password using .value, so there’s no need to call .value on them again.
  3. Clearing form fields: You’re trying to clear the form fields incorrectly. Since you already retrieved their values using .value, you don’t need to assign values to them again.

Here’s the corrected JavaScript code:

document.getElementById('createAccountForm').addEventListener('submit', function(event) {
    event.preventDefault();

    // Get username and password from the form
    const username = document.getElementById('newUsername').value;
    const password = document.getElementById('newPassword').value;

    if (username && password) {
        // Set logged-in state in localStorage
        localStorage.setItem('loggedIn', 'true');
        localStorage.setItem('username', username);

        // Alert popup with new user's info 
        alert(`New Username is ${username}. New Password is ${password}.`);

        // Clear the form fields
        document.getElementById('newUsername').value = '';
        document.getElementById('newPassword').value = '';

        // Locate user to home page
        window.location.href = 'index.html';
    } else {
        alert('Please enter both username and password.');
    }
});

These changes should address the issues you’re facing.
I hope this Helped

1 Like