Ellis Jordan的用户名建议App代码问题求助：方法使用与运行异常

Hey Ellis, let's break down what's going wrong with your app and fix it up to meet all your assignment requirements.

Key Problems in Your Current Code #

• Malformed span ID: Your result span has an invalid ID (lastname" + "firstletter" + "favnumber) which means you can't target it to display the final username.
• Missing username concatenation & display: You're processing the input values correctly, but you never combine them into the required username format or show the result to the user.
• Unclear input display: Your original paragraph tried to combine multiple span IDs incorrectly, making it impossible to show individual input details or the final username.

Quick Confirmation: Your toLowerCase() and charAt() Usage is Correct! #

You're using these methods exactly as needed:

• charAt(0) properly grabs the first character of the first name (the initial we need)
• toLowerCase() correctly converts strings to all lowercase, which is perfect for consistent username formatting.

The main gap is putting those processed values together and displaying the finished username.

Corrected Full Code #

Here's the revised code that checks all your assignment boxes:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Ellis Jordan's Username Suggestion App</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript">
        function userPrompt() {
            // Get user inputs in sequence
            var first = prompt("What is your first name?");
            // Exit if user cancels any prompt to avoid errors
            if (!first) return;
            
            var last = prompt("What is your last name?");
            if (!last) return;
            
            var number = prompt("What is your favorite number?");
            if (!number) return;

            // Process values as required
            var firstInitial = first.charAt(0).toLowerCase();
            var lowerCaseLast = last.toLowerCase();

            // Build the username using the required format
            var username = lowerCaseLast + firstInitial + number;

            // Update the page with input details and final username
            document.getElementById('firstname').textContent = first;
            document.getElementById('lastname').textContent = last;
            document.getElementById('favnumber').textContent = number;
            document.getElementById('usernameResult').textContent = username;
        }
    </script>
</head>
<body>
    <header>
        <h1>Ellis Jordan's Username Suggestion App</h1>
    </header>
    <input type="button" onclick="userPrompt()" value="Enter your user information" />
    
    <!-- Clear sections to display inputs and the generated username -->
    <p>Your first name: <span id="firstname">(not entered)</span></p>
    <p>Your last name: <span id="lastname">(not entered)</span></p>
    <p>Your favorite number: <span id="favnumber">(not entered)</span></p>
    <p>Your suggested username: <strong><span id="usernameResult">(not generated)</span></strong></p>

    <footer>
        <p id="copyright"><b>&copy; 2019 Ellis Jordan</b></p>
    </footer>
</body>
</html>

Key Improvements Explained #

• Valid span IDs: Each piece of data has a clear, unique ID so we can update the page correctly.
• Username concatenation: We combine the lowercase last name, first initial (lowercase), and favorite number into the exact format you need (e.g., washingtong42).
• Prompt error handling: Added checks to exit the function if the user cancels any prompt, preventing errors from undefined values.
• Clearer user display: Separated input details and highlighted the final username for better readability.
• Safer text updates: Used textContent instead of innerHTML for plain text changes—it's more secure and efficient.

Now when you click the button, you'll get all three prompts in order, and once you complete them, your suggested username will display correctly!

内容的提问来源于stack exchange，提问作者Ellis Jordan