将 Element.value 与数字进行比较会产生意想不到的结果

Question

它只计算/比较所有三个数字的第一个数字。我认为，它将输入值设为 string/text。有人可以帮我吗..

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

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>

Answer 1

您可以在使用 + 符号比较它们之前将所有值转换为数字。我已经在下面的代码片段中编辑了您的代码。它现在应该可以工作了。

  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>

Answer 2

只需更新那部分：

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

Answer 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);

将 Element.value 与数字进行比较会产生意想不到的结果

Comparing Element.value to number is giving unexpected results

html

javascript

css

operators