Comparing Element.value to number is giving unexpected results-CodePudding

It calculates / compares only the first digit on all three numbers. I think, it is taking the input values as string/text. could someone help me in this pls..

It takes the value as numbers but it is considering it as 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>

CodePudding user response：

It's probably because your fsnumber, snumber and tnumber are stored in html as strings. You just need to convert those numbers to integers. Obviously add some logic to check if it succeeded in converting before using the variables further.

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

CodePudding user response：

You can convert all the values to a number before comparing them by using the sign. I've edited your code in the below snippet. It should work now.

  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>

CodePudding user response：

Just update that part:

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