JavaScript中Element.value与数字比较得到非预期结果如何解决

问题根因 #

即便你给input设置了type="number"属性，通过DOM元素的value属性获取到的内容永远是字符串类型，默认会按照字符串的Unicode编码逐位比较大小，这就是你遇到仅对比第一位就返回结果的原因。

修改方案 #

1. 核心逻辑修改（JS代码） #

获取输入值后主动转换为数值类型，同时补充取消按钮的事件绑定和输入合法性校验，修改后代码如下：

function chkcnd() {
  // 核心修改：将字符串输入转为数值类型
  var fnumber = Number(document.getElementById("fnumber").value);
  var snumber = Number(document.getElementById("snumber").value);
  var tnumber = Number(document.getElementById("tnumber").value);

  // 输入合法性校验，避免空输入或者非数字输入导致异常
  if (isNaN(fnumber) || isNaN(snumber) || isNaN(tnumber)) {
    document.getElementById("result").innerHTML = "请输入合法的数字";
    return;
  }

  if (fnumber >= snumber && fnumber >= tnumber) {
    document.getElementById("result").innerHTML = "First Number is Big";
  } else if (snumber >= fnumber && snumber >= tnumber) {
    document.getElementById("result").innerHTML = "Second Number is Big";
  } else {
    document.getElementById("result").innerHTML = "Third Number is Big";
  }
}

document.getElementById("btn-snd").onclick = chkcnd;

function clear() {
  document.getElementById("fnumber").value = "";
  document.getElementById("snumber").value = "";
  document.getElementById("tnumber").value = "";
  document.getElementById("result").innerHTML = "";
}

// 补充：绑定取消按钮的清空事件
document.getElementById("btn-cnd").onclick = clear;

2. 补充修改（HTML代码） #

修复原有HTML中label文本重复、按钮文字拼写错误的问题，修改后代码如下：

<table>
  <tr>
    <th>
      <label for="fnumber">Enter First number</label>
    </th>
    <td>
      <input type="number" name="fnumber" id="fnumber">
    </td>
  </tr>
  <tr>
    <th>
      <label for="snumber">Enter Second number</label>
    </th>
    <td>
      <input type="number" name="snumber" id="snumber">
    </td>
  </tr>
  <tr>
    <th>
      <label for="tnumber">Enter Third number</label>
    </th>
    <td>
      <input type="number" name="tnumber" id="tnumber">
    </td>
  </tr>
  <tr>
    <th><label for="Result">Result</label></th>
    <td>
      <p id="result"></p>
    </td>
  </tr>
  <tr>
    <td> <button type="button" id="btn-snd">Submit</button> </td>
    <td> <button type="button" id="btn-cnd">Cancel</button> </td>
  </tr>
</table>

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