如何实现HTML输入框失焦时自动赋值为0？现有代码失效

代码中的核心错误 #

1. DOM元素处理逻辑错误
   原代码里parseInt(document.getElementById(id))把DOM元素对象强制转成数字，结果是NaN，再访问NaN.value只会得到undefined，完全没正确获取到输入框元素。

2. 判断条件不匹配实际场景
   输入框为空时，它的value是空字符串（""），不是undefined，所以原判断if (input == undefined)永远不会触发。

3. 变量类型混淆
   原代码里input被赋值为数值（或undefined），之后尝试设置input.value——但数值类型没有value属性，这是无效操作，必须直接操作DOM元素修改输入框的值。

修正后的代码 #

HTML（可选优化：保持参数类型统一）

<div class="btns-ingredient">
    <button class="btn-ingredient text-btn" onclick="decrement('1')">-</button>
    <input type="number" id="1" value="0" name="quantidade" min="0" max="100" class="ingredient-counter" onfocusout="reset_quantity('1')">
    <button class="btn-ingredient text-btn" onclick="increment('1')">+</button>
</div>

JavaScript（修复逻辑）

function reset_quantity(id) {
    // 先获取输入框DOM元素
    const inputElement = document.getElementById(id);
    // 把输入值转成数字，空字符串/非数字会转为NaN
    const inputValue = parseInt(inputElement.value, 10);

    // 空输入或非有效数字时，设置为0
    if (isNaN(inputValue)) {
        inputElement.value = 0;
    }
}

或者更简洁的写法：

function reset_quantity(id) {
    const inputElement = document.getElementById(id);
    inputElement.value = inputElement.value.trim() === '' || isNaN(parseInt(inputElement.value, 10)) ? 0 : inputElement.value;
}

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