如何实现空输入禁加车辆及车库满禁用输入？函数设计咨询

Hey there! Let's work through your two requirements step by step, and I'll also give you a clear answer on whether to use a separate function for garage capacity checks or integrate it into addCar.

1. Block Add Operation When Inputs Are Empty #

First, we'll add input validation at the start of the addCar function. We'll trim whitespace from each input (so users can't just enter spaces to bypass checks) and verify all fields are filled. If any input is empty, we'll alert the user and stop the function from running further.

2. Garage Capacity Limit & Input/Button Disable #

For the capacity check, I strongly recommend creating separate dedicated functions rather than shoving all logic into addCar. Here's why:

• It keeps your code modular and follows the single-responsibility principle (each function does one specific job)
• It's reusable—if you ever need to check garage capacity elsewhere (like when deleting a car or on page load), you can call these functions instead of duplicating code
• It simplifies future maintenance (if you change how capacity is calculated later, you only update one spot)

We'll implement this by:

• Defining a max capacity constant (you can adjust this number anytime)
• Creating a checkGarageFull() function that returns true/false based on the garage array length
• Adding an updateGarageState() function to handle disabling/enabling inputs and buttons when the garage hits capacity
• Checking the garage state on page load (useful if you ever persist garage data) and right after adding a car

Updated Working Code #

JavaScript #

$(document).ready(readyNow); 
let garage = []; 
const MAX_GARAGE_CAPACITY = 5; // Set your desired max capacity here

function readyNow() { 
    console.log('JQ loaded'); 
    $('#addCarButton').on('click', addCar);
    // Check garage state on initial load (in case of saved data)
    updateGarageState();
} 

function addCar() { 
    console.log('Running addCar'); 

    // Trim inputs to catch empty space entries
    const year = $('#yearInput').val().trim();
    const make = $('#makeInput').val().trim();
    const model = $('#modelInput').val().trim();
    
    // Validate all fields are filled
    if (!year || !make || !model) {
        alert('Please fill in all fields: Year, Make, and Model!');
        return; // Exit function if any input is empty
    }

    // Check if garage is already full before adding
    if (checkGarageFull()) {
        alert('Garage is at max capacity! No more cars can be added.');
        return;
    }

    // Create new car object and add to garage
    let newCar = { 
        year: year, 
        make: make, 
        model: model 
    }; 
    garage.push(newCar); 

    // Clear input fields
    $('#yearInput').val(''); 
    $('#makeInput').val(''); 
    $('#modelInput').val(''); 

    // Render new car to the page
    displayGarage(newCar); 

    // Update input/button state after adding
    updateGarageState();
} 

// Separate function to check if garage is at max capacity
function checkGarageFull() {
    return garage.length >= MAX_GARAGE_CAPACITY;
}

// Handle disabling/enabling inputs and submit button
function updateGarageState() {
    const isGarageFull = checkGarageFull();
    $('#yearInput, #makeInput, #modelInput').prop('disabled', isGarageFull);
    $('#addCarButton').prop('disabled', isGarageFull);
}

function displayGarage(newCar) { 
    console.log('Rendering new car'); 
    // Using template literals for cleaner string formatting
    $('#garageOut').append(`<li>Year: ${newCar.year} | Make: ${newCar.make} | Model: ${newCar.model}</li>`); 
}

HTML (fixed extra closing </div> tag) #

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <script src="scripts/client.js" charset="utf-8"></script> 
    <link rel="stylesheet" href="styles/style.css"> 
    <title>Week 6 Tier 1 Assignment</title> 
</head> 
<body> 
    <h1><img src="images/logo.png" alt="noah's car garage"></h1> 
    <h2>Please Enter your Year, Make, and Model: <span id="garageList"></span></h2> 
    <input placeholder="Year" id="yearInput" /> 
    <input placeholder="Make" id="makeInput" /> 
    <input placeholder="Model" id="modelInput" /> 
    <button id="addCarButton">Add Car</button> 
    <h3>Garage:</h3> 
    <div id="garageOut"></div> 
</body> 
</html>

Quick Note on Function Design #

By splitting the capacity check and state update into their own functions, you're following solid coding practices:

• checkGarageFull() only handles the logic of determining if the garage is full
• updateGarageState() only handles modifying the UI (disabling/enabling elements)
• addCar() focuses solely on the flow of adding a valid car to the garage

This makes your code easier to read, test, and modify down the line.

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