将 Element.value 与 number 进行比较会产生意想不到的结果答案

【问题标题】：Comparing Element.value to number is giving unexpected results将 Element.value 与 number 进行比较会产生意想不到的结果
【发布时间】：2022-01-02 00:24:57
【问题描述】：

它只计算/比较所有三个数字的第一个数字。我认为，它将输入值作为字符串/文本。有人可以帮助我吗？。

它将值视为数字，但将其视为文本。

function chkcnd() {
  var fnumber = document.getElementById("fnumber").value;
  var snumber = document.getElementById("snumber").value;
  var tnumber = document.getElementById("tnumber").value;

  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 = "";
}

<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 First number</label>
    </th>
    <td>
      <input type="number" name="snumber" id="snumber">
    </td>
  </tr>
  <tr>
    <th>
      <label for="tnumber">Enter First 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">Submil</button> </td>
    <td> <button type="button" id="btn-cnd">Cancel</button> </td>
  </tr>
</table>

【问题讨论】：

使用内置 API valueAsNumber，不需要字符串到数字的转换。

标签： javascript html css operators

【解决方案1】：

您可以使用+ 符号将所有值转换为数字，然后再进行比较。我在下面的 sn-p 中编辑了您的代码。它现在应该可以工作了。

  function chkcnd() {
    var fnumber = document.getElementById("fnumber").value;
    var snumber = document.getElementById("snumber").value;
    var tnumber = document.getElementById("tnumber").value;

    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 = "";
}

<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 First number</label>
    </th>
    <td>
      <input type="number" name="snumber" id="snumber">
    </td>
  </tr>
  <tr>
    <th>
      <label for="tnumber">Enter First 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">Submil</button> </td>
    <td> <button type="button" id="btn-cnd">Cancel</button> </td>
  </tr>
</table>

【讨论】：

或者使用不需要转换的内置APIvalueAsNumber。

【解决方案2】：

只需更新该部分：

  var fnumber = parseFloat(document.getElementById("fnumber").value);
  var snumber = parseFloat(document.getElementById("snumber").value);
  var tnumber = parseFloat(document.getElementById("tnumber").value);

【讨论】：

查看所有其他答案的所有 cmets（.valueAsNumber 等）

【解决方案3】：

这可能是因为您的 fsnumber、snumber 和 tnumber 以字符串形式存储在 html 中。您只需要将这些数字转换为整数。显然在进一步使用变量之前添加一些逻辑来检查它是否成功转换。

  var fnumber = parseInt(document.getElementById("fnumber").value);
  var snumber = parseInt(document.getElementById("snumber").value);
  var tnumber = parseInt(document.getElementById("tnumber").value);

【讨论】：

所有内容都以字符串形式存储在 HTML 中，正如对问题的评论中所述，您可以简单地使用 document.getElementById("fnumber").valueAsNumber
请不要忘记parseInt的第二个参数，它是可选的it does not default to 10！
感谢大家的回复。