cannot convert input text to int in JavaScript

Question

I am trying to sort a table in HTML by clicking the table header. The sorting is fine for strings, but when comparing numbers, it evaluates "10" < "2". Obviously, I'm comparing strings, but I can't get a number out of my table cell. Here's a working example of what's going on:

 <script type="text/javascript" >
      function sortBy() {
          var table = document.getElementById("table");
          var rows = table.getElementsByTagName("tr");
          var number = rows[1].getElementsByTagName("td")[0].innerHTML;
          document.write(number);  // This should be printing "7".
      }
 </script>

 <?php 
      echo "<table id='table'>
         <thead><tr><th onclick='sortBy()'>CLICK ME</th></thead></tr>
         <tbody><td><input readonly value='7'></td></tbody>";
 ?>

In this example, I'm trying to get the integer 7. I've tried parseInt(number), but that evaluates to NaN, so I tried writing what number was and it prints a textfield instead of the textfield's content. I've checked this by printing number.length, and I get 29, rather than 1.

I've tried number.value but that's undefined.

I've tried replacing .innerHTML with .value, but that's undefined too.

Is there some way I can convert this into a number? Or at least strip away the html tags and such? I realize I can rig up my own compare logic using the string and it's length ( if (A.length > B.length) { A's bigger } else { compare like normal } ), but that's messy and won't help me to understand this problem.

Answer 1

The problem is that you aren't picking the correct tag; you need to add a selector for the <input> that holds the value.

function sortBy() {
    var table = document.getElementById("table");
    var rows = table.getElementsByTagName("tr");
    var number = rows[1].getElementsByTagName("td")[0].getElementsByTagName("input")[0].getAttribute("value");
    document.write(number);  // This should be printing "7".
}

Answer 2

Use Element.getAttribute and parseInt in order to retrieve and parse value correctly:

var number = rows[1].getElementsByTagName("td")[0].getAttribute('value')
document.write(parseInt(number));  

Answer 3

You could try using the Number() function to create a new Number wrapper class with the value from the string. This should continue to work even if the value is actually a number.

 <script type="text/javascript" >
      function sortBy() {
          var table = document.getElementById("table");
          var rows = table.getElementsByTagName("tr");
          var number = rows[1].getElementsByTagName("td")[0].innerHTML;
          document.write(Number(number));  // This should be printing "7".
      }
 </script>

 <?php 
      echo "<table id='table'>
         <thead><tr><th onclick='sortBy()'>CLICK ME</th></thead></tr>
         <tbody><td><input readonly value='7'></td></tbody>";
 ?>

Read more in the MDN documentation page.

Answer 4

Aside that the table structure need some corrections, by using innerHTML function you will output everything that td tag contains.
To correct JavaScript code I would suggest to use query selector as below:

function sortBy() {
  var table = document.getElementById("table");
  var rows = table.getElementsByTagName("tr");
  var number = rows[1].querySelector("td > input").value;
  console.log(number);
}

<table id='table'>
  <thead>
    <tr>
      <th onclick='sortBy()'>CLICK ME</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input readonly value='7'></td>
    </tr>
  </tbody>
</table>