如何在JavaScript代码中限制商品数量不低于0，负值时弹出错误提示？

要实现商品数量不低于0，且操作导致负库存时弹出提示的需求，只需修改库存更新逻辑，以下是修改后的完整代码：

const inputValue = id => {
    const input = document.getElementById(id);
    const inputValue = input.value;
    input.value = '';

    return inputValue;
}

const addProduct = () => {
    const productName = inputValue('product-name');
    const productQnt = inputValue('product-quantity');

    const number = Number(productQnt);

    // 修正输入验证逻辑：确保商品名称非空、数量为有效整数
    if (!productName || isNaN(number) || !Number.isInteger(number)) {
        alert('输入无效，请填写商品名称和整数数量');
        return;
    }

    setProductInLocalStorage(productName, productQnt);
    displayProduct();
}

// 获取本地存储的商品数据
const getLocalStorageData = () => {
    const products = localStorage.getItem('All-Products');
    return JSON.parse(products) || {};
}

// 更新本地存储中的商品数量
const setProductInLocalStorage = (productName, productQnt) => {
    let products = getLocalStorageData();
    const currentQty = parseInt(products[productName]) || 0;
    const changeQty = parseInt(productQnt);
    let newQty = currentQty + changeQty;

    // 处理负库存情况
    if (newQty < 0) {
        alert('No product in Store');
        newQty = 0;
    }

    products[productName] = newQty;
    localStorage.setItem('All-Products', JSON.stringify(products));
};

// 在UI上渲染商品列表
const displayProduct = () => {
    const allProducts = getLocalStorageData();
    const section = document.getElementById('all-products');
    section.textContent = '';

    for (const product in allProducts) {
        const quantity = allProducts[product];
        const div = document.createElement('div');

        div.innerHTML = `
            <div class="shadow-sm p-3 mb-2 bg-body rounded">
            <span class="fs-4">${product}</span>
            Quantity:<small class="fw-bold">
                ${quantity}
            </small>
            </div>
        `;

        section.appendChild(div);
    }
}

// 页面加载时初始化商品展示
displayProduct();

关键修改说明 #

1. 修复输入验证逻辑：原代码的输入判断存在逻辑错误，改为验证商品名称非空、数量为有效整数，避免无效输入进入库存更新流程。
2. 新增负库存处理：在库存计算时，若新库存小于0，弹出提示并强制将库存设为0，确保商品数量不会出现负值。
3. 简化数据获取逻辑：优化getLocalStorageData函数，直接返回空对象替代冗余的条件判断，代码更简洁。

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