Range输入值类型异常导致JS if条件判断错误求助

核心问题：字符串与数值的比较差异 #

input元素（包括range类型）的value属性返回的是字符串类型，哪怕显示的是数字。你看到的previousduration: 297和thisduration: 66，实际是字符串"297"和"66"。

字符串比较是按字符的ASCII码顺序逐个对比的：第一个字符"2"的ASCII码小于"6"，所以"297" < "66"会被判定为true，因此程序进入else分支输出"smaller"。

关于类型检查的矛盾解释 #

• isNaN(previousduration.value)返回false（输出"is a number"）：因为isNaN会先尝试将参数转换为数值，字符串"297"能转成有效数值297，所以不认为是NaN。
• typeof previousduration.value返回"string"（输出"is not a number"）：typeof直接检测变量的原始类型，input的value本质就是字符串，所以结果是字符串类型。

解决方法：转换为数值后再比较 #

只需要把两个value转换为数值类型，再进行比较即可，常用的转换方式有三种：

• 使用parseInt()转换（适合整数场景）
• 使用Number()函数转换
• 使用一元加号+转换

修改你的条件判断代码如下（以一元加号为例）：

for (let n = 1; n <= totalslidesnr; ++ n){
  document.getElementById("durationrange"+n).addEventListener("input", function () {

    var prev = n-1;
    var previousduration = document.getElementById("durationrange"+prev);
    var thisduration = document.getElementById("durationrange"+n);

    // 将字符串转换为数值
    const prevVal = +previousduration.value;
    const currVal = +thisduration.value;

    if (prevVal > currVal) {
      console.log("larger");
      console.log("previousduration", prevVal);
      console.log("thisduration", currVal);
    }
    else {
      console.log("smaller");
      console.log("previousduration", prevVal);
      console.log("thisduration", currVal);
    }
  });
}

也可以选择parseInt的写法：

const prevVal = parseInt(previousduration.value, 10);
const currVal = parseInt(thisduration.value, 10);

这样就能正确按照数值大小进行比较了。

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