将用户输入存入数组并更新下拉选项列表及404错误排查

Hey there! Let's work through your issues step by step—first fixing that 404 error, then getting your food list update and input hiding functionality working perfectly.

1. Resolving the 404 Error #

A 404 error usually means the browser can't find a resource (like a script, stylesheet, or the page itself). Here's what to check:

• Fix your HTML structure: Your original code had CSS and JavaScript floating outside proper tags, which can cause parsing issues that mimic resource errors. Wrap your CSS in a <style> tag inside the <head> of your document, and place your JavaScript at the end of the <body> (or wrap it in a DOM-ready handler) to ensure elements exist before your code runs.
• Verify resource paths: Double-check that your jQuery CDN link is working (your current one is valid, but if you're using local files, confirm their paths are correct).
• Page deployment: If you're hosting this on a server, make sure your HTML file is named correctly and placed in the right directory so the server can find it.

2. Implementing the Required Features #

Your existing code had a few gaps: it didn't update the dropdown list when adding new food, the form submission was refreshing the page, and the input area wasn't reliably hiding after submission. Here's the fixed, complete code with explanations:

Full Working Code #

<!DOCTYPE html>
<html>
<head>
    <title>Favorite Food List</title>
    <style>
        body {
            background: #20262E;
            padding: 20px;
            font-family: Helvetica;
        }
        #banner-message {
            background: #778899;
            border-radius: 4px;
            padding: 20px;
            font-size: 25px;
            text-align: center;
            transition: all 0.2s;
            margin: 0 auto;
            width: 300px;
        }
        button {
            background: #A52A2A;
            border: none;
            border-radius: 5px;
            padding: 8px 14px;
            font-size: 15px;
            color: #fff;
        }
        .addButton {
            background: #A52A2A;
            color: white;
        }
        #banner-message.alt {
            background: #0084ff;
            color: #fff;
            margin-top: 40px;
            width: 200px;
        }
        #banner-message.alt button {
            background: #fff;
            color: #000;
        }
        .hide {
            display: none;
        }
        .show {
            display: block;
        }
        .demo {
            background: #A52A2A;
            border: none;
            border-radius: 5px;
            padding: 8px 14px;
            font-size: 15px;
            color: #fff;
        }
        #myDIV {
            background: #778899;
            padding: 20px;
            font-size: 25px;
            text-align: center;
            transition: all 0.2s;
            margin: 0 auto;
            width: 300px;
            display: none;
        }
        input[type=submit] {
            background: #A52A2A;
            border: none;
            border-radius: 5px;
            padding: 8px 14px;
            font-size: 15px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="banner-message">
        <p>My favorite food</p>
        <select id="selectFood">
            <option>Select food</option>
        </select>
        <button>Choose</button>
        <br>
        <button id="addButton" onclick="addFunction();">
            Add new food
        </button>
    </div>
    <div id="myDIV">
        <form onsubmit="foodInput(event)">
            <input type="text" id="addedFood" placeholder="Type food">
            <input type="submit" value="Submit">
        </form>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        // Global options array to store food items
        let options = ["Pizza", "Hamburger", "Salad"];
        const select = document.getElementById("selectFood");

        // Initialize dropdown list on page load
        function initDropdown() {
            for (let i = 0; i < options.length; i++) {
                const opt = options[i];
                const el = document.createElement("option");
                el.textContent = opt;
                el.value = opt;
                select.appendChild(el);
            }
        }

        // Toggle input area visibility
        function addFunction() {
            const x = document.getElementById("myDIV");
            x.style.display = x.style.display === "block" ? "none" : "block";
        }

        // Handle new food submission
        function foodInput(e) {
            // Prevent default form submission (stops page refresh)
            e.preventDefault();
            
            const input = document.getElementById('addedFood');
            const boxvalue = input.value.trim();
            
            // Skip empty inputs
            if (!boxvalue) return;
            
            // Add new food to array
            options.push(boxvalue);
            
            // Create and add new option to dropdown
            const el = document.createElement("option");
            el.textContent = boxvalue;
            el.value = boxvalue;
            select.appendChild(el);
            
            // Clear input field
            input.value = '';
            
            // Hide the input area automatically
            document.getElementById("myDIV").style.display = "none";
        }

        // Run initialization when DOM is ready
        document.addEventListener('DOMContentLoaded', initDropdown);
    </script>
</body>
</html>

Key Fixes & Improvements: #

• Prevent page refresh: Added e.preventDefault() in foodInput to stop the form from reloading the page when submitted, which was causing your new items to disappear.
• Update dropdown list: When a new food is added, we create a new <option> element and append it directly to the dropdown, so the list updates immediately.
• Auto-hide input area: After submission, we explicitly set the input div's display to none—no need for an extra onclick on the submit button.
• DOM-ready initialization: Wrapped the dropdown setup in DOMContentLoaded to ensure the <select> element exists before we try to modify it.
• Input validation: Added a check to skip empty submissions, so you don't add blank items to the list.
• Cleaned up structure: Properly organized HTML, CSS, and JavaScript into their respective sections for better readability and browser parsing.

Final Checks #

After implementing this code:

1. The 404 error should disappear because the HTML structure is valid and all resources are correctly referenced.
2. Clicking "Add new food" will show the input area.
3. Typing a food name and clicking "Submit" will add it to the dropdown, clear the input, and hide the input area automatically.

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