Cannot convert input to int in javascript

Question

I am trying to sort a table in HTML by clicking on the table title. Sorting is suitable for strings, but when comparing numbers, it evaluates to "10" <"2". Obviously, I am comparing rows, but I cannot get the number from my table. Here is a working example of what is happening:

<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 am trying to get the integer 7 . I tried parseInt(number) , but it evaluates to NaN , so I tried to write what was number , and it prints the text field instead of the contents of the text field. I checked this by typing number.length and I get 29 , not 1 .

I tried number.value , but it is undefined .

I tried replacing .innerHTML with .value , but this is also undefined .

Is there any way to convert this number to number? Or at least remove html tags, etc.? I understand that I can fine-tune my own comparison logic using string and length (if (A.length> B.length) {A is greater} else {compare, as usual}), but this is random and will not help me understand this problem.

Answer 1

The problem is that you are not choosing the right tag; you need to add a selector for the <input> that contains 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 to correctly get and parse the value:

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

Answer 3

Besides the fact that the table structure needs some corrections, with the help of the innerHTML function you will display all td tags.
To fix the JavaScript code, I would suggest using a query selector as shown 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> 

Answer 4

You can try using the Number() function to create a new Number wrapper class with a value from a string. This must continue, even if the value is really 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>"; ?> 

See the MDN documentation for more details.