Javascript ">=" giving false when is true

September 14, 2022

I have this vars:

var LC = $('#a').text() >= document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(3) > input[type=text]").value,
    ES = $('#b').text() >= document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(4) > input[type=text]").value,
    VK = $('#c').text() >= document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(5) > input[type=text]").value,
    SPY = $('#d').text() >= document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(6) > input[type=text]").value,
    CL = $('#e').text() >= document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(7) > input[type=text]").value;

I noticed that whenever there were 2 digits each variable returns true or false correctly. But when I get to the hundreds, the variables return false wrongly (I think).

For example for the var CL if $('#e').text() equals 64 and document.querySelector("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(7) > input[type=text]").value equals 3 returns true.

But if the first returns 164 and the second still 3 will return false.
I can’t understand why. Tried to google it but I didn’t find anything. I may not be looking for the right terms tho (sorry).

My javascript is not excellent, I learned it myself to automate some things that make my life easier. If anyone can help me, I’d be very grateful.

>Solution :

Cast the input values and text content to integers.

You can achieve this various ways:

+str
parseInt(str)
Number(str)

var LC  = +$('#a').text() >= +$("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(3) > input[type=text]").val(),
    ES  = +$('#b').text() >= +$("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(4) > input[type=text]").val(),
    VK  = +$('#c').text() >= +$("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(5) > input[type=text]").val(),
    SPY = +$('#d').text() >= +$("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(6) > input[type=text]").val(),
    CL  = +$('#e').text() >= +$("#content_value > div:nth-child(3) > div > form > table > tbody > tr:nth-child(2) > td:nth-child(7) > input[type=text]").val();

console.log([LC, ES, VK, SPY, CL].every(v => v === true)); // All eval to true

*, *:before, *:after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
body { display: flex; flex-direction: column; justify-content: center; align-items: center; }
input[type="text"] { width: 4em; text-align: center; }
.container { display: flex; gap: 0.25em; margin-left: 0.5em; }
.container div { text-align: center; width: 3.25em; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div id="a">1</div>
  <div id="b">101</div>
  <div id="c">1001</div>
  <div id="d">10001</div>
  <div id="e">100001</div>
</div>
<div id="content_value">
  <div></div>
  <div></div>
  <div>
    <div>
      <form>
        <table>
          <tbody>
            <tr></tr>
            <tr>
              <td></td>
              <td></td>
              <td><input type="text" value="1"/></td>
              <td><input type="text" value="101"/></td>
              <td><input type="text" value="1001"/></td>
              <td><input type="text" value="10001"/></td>
              <td><input type="text" value="100001"/></td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
  </div>
</div>