商品数量输入框max属性设置及监听失效问题求助

我尝试把cantidad_disponible（可用库存）设为number类型输入框的max属性，一开始用addEventListener时返回null，改用HTML的onchange绑定updatecantidad函数后，输入框的min和max限制完全不生效。

我的目标是：给输入框的max属性设置可用库存值，限制输入值不超过该数量，尝试的代码如下：

<input id="shoppingCartItemQuantity_${id_prod}" class="shopping-cart-quantity-input shoppingCartItemQuantity_${id_prod}" type="number" value="1" max="${cantidad_disponible}" />

当前无效的代码示例：

JavaScript代码 #

const cantidad_disponible = document.querySelector('#articulos>#productos_content>.tr >.cantidad_disponible').textContent;
console.log(cantidad_disponible) 
 
function updatecantidad(valor){
  let v = parseInt(valor);
  if (v < 1) valor = 1;
  if (v > cantidad_disponible) valor = cantidad_disponible;
}

HTML代码 #

<table id="articulos"class="table">
        <thead>
            <tr>
                <TH>id </TH>
                <TH>cantidad_disponible</TH>
                <TH>Añadir</TH>
            </tr>
        </thead>
        <tbody id="productos_content">
           <tr class="tr">
               <td class="id_n"> 15</td>
               <td class="cantidad_disponible">10</td>
               <input id="shoppingCartItemQuantity_${id_prod}" onchange="updatecantidad(this.value);" class="shopping-cart-quantity-input shoppingCartItemQuantity_" type="number" value="1" >
           </tr>
        </tbody>
</table>

有一个可正常运行的参考示例：

参考JavaScript代码 #

document.getElementById("inp").addEventListener("change", function() {
  let v = parseInt(this.value);
  if (v < 1) this.value = 1;
  if (v > 50) this.value = 50;
});

参考HTML代码 #

<input type="number" min="1" max="50" id="inp">

需要解决输入框无法限制最大输入值为可用库存的问题。

问题分析与解决办法 #

1. 类型不匹配导致逻辑错误：
   cantidad_disponible是从DOM获取的文本内容，属于字符串类型，和parseInt(valor)得到的数字比较时会出现字符串对比的逻辑错误（比如12 > "100"会被判定为true）。需要把它转为数字类型：

   const cantidad_disponible = parseInt(document.querySelector('#articulos>#productos_content>.tr >.cantidad_disponible').textContent.trim());
   

2. updatecantidad函数未修改输入框实际值：
   原函数里只修改了局部变量valor，并没有把修正后的值赋值给输入框，所以输入框内容不会变化。有两种修复方式：

   • 方式一：修改函数参数为输入框元素本身
     调整HTML：

     <input id="shoppingCartItemQuantity_${id_prod}" onchange="updatecantidad(this);" class="shopping-cart-quantity-input shoppingCartItemQuantity_" type="number" value="1" >
     

     调整JS函数：

     function updatecantidad(input){
       let v = parseInt(input.value);
       if (isNaN(v)) v = 1; // 处理非数字输入的情况
       if (v < 1) input.value = 1;
       if (v > cantidad_disponible) input.value = cantidad_disponible;
     }
     

   • 方式二：修复addEventListener返回null的问题（大概率是DOM未加载完成就执行了JS），改用DOM加载完成后绑定事件：

     document.addEventListener('DOMContentLoaded', function() {
       const cantidad_disponible = parseInt(document.querySelector('#articulos>#productos_content>.tr >.cantidad_disponible').textContent.trim());
       const input = document.querySelector('#shoppingCartItemQuantity_${id_prod}');
       // 先设置输入框的原生max/min属性，让箭头调整时生效
       input.setAttribute('max', cantidad_disponible);
       input.setAttribute('min', 1);
       
       input.addEventListener('change', function() {
         let v = parseInt(this.value);
         if (isNaN(v)) this.value = 1;
         if (v < 1) this.value = 1;
         if (v > cantidad_disponible) this.value = cantidad_disponible;
       });
     });
     

3. 补充说明：
   浏览器原生的max和min属性仅在通过输入框上下箭头调整值时生效，直接手动输入数字时不会拦截，所以必须配合JS逻辑做值的修正，才能完全限制输入范围。

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