如何根据条件切换input元素边框颜色：仅值为0时变红

你当前的代码逻辑存在两处问题：

1. 判断条件不符合需求：<=1会把0和1都纳入红色边框的范围，和你“仅当值为0时变红”的要求不符
2. 条件存在重叠冲突：当值等于1时，<=1和>=1两个条件都会触发，逻辑混乱

以下是修正后的代码：

const custom = () => {
    // 转换为数字类型，避免字符串比较的潜在问题
    const inputValue = Number(individual.value);
    if(inputValue === 0) {
        error.style.display = 'block';
        individual.style.borderColor = 'red';
    } else {
        error.style.display = 'none';
        individual.style.borderColor = 'hsl(172, 67%, 45%)';
    }
}

核心调整说明： #

• 用Number()转换输入值：input的value默认是字符串类型，直接做数值判断容易出问题，转成数字后判断更准确
• 精准匹配=== 0：严格限定只有值为0时才触发红色边框和错误提示
• 简化逻辑分支：用else统一处理所有非0的情况，避免条件重叠

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