將Element.value與number進行比較會產生意想不到的結果

它只計算/比較所有三個數字的第一個數字。我認為，它將輸入值作為字串/文本。有人可以幫我解決這個問題嗎..

它將值視為數字，但將其視為文本。

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>

uj5u.com熱心網友回復：

這可能是因為您的 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);

uj5u.com熱心網友回復：

在使用 符號進行比較之前，您可以將所有值轉換為數字。我在下面的代碼段中編輯了您的代碼。它現在應該可以作業了。

  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>

uj5u.com熱心網友回復：

只需更新該部分：

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

標籤：javascript html css 运营商

上一篇：為什么js.reduce()在array.length==1時表現不同？

下一篇：使用字串將多個css值保存到一個javascript變數中