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.

You should be selecting the <input>, NOT the <td>. That's why you get a NaN. You need to append another getElementsByTagName(..)[0] to get the input, then you get its value attr. — RompePC
– RompePC, Commented Jun 16, 2017 at 21:13
@RompePC You should post that as an answer, not in the comments. — krillgar
– krillgar, Commented Jun 18, 2017 at 13:53

Lord Farquaad · Accepted Answer · 2017-10-07 02:01:07Z

7

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".
}

edited Oct 7, 2017 at 2:01

Lord Farquaad

7051 gold badge13 silver badges34 bronze badges

answered Jun 18, 2017 at 20:35

RompePC

8351 gold badge8 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andriy Ivaneyko · Accepted Answer · 2017-06-16 21:11:23Z

1

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));

answered Jun 16, 2017 at 21:11

Andriy Ivaneyko

22.3k7 gold badges70 silver badges89 bronze badges

Comments

thornjad · Accepted Answer · 2017-06-16 21:15:12Z

1

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.

answered Jun 16, 2017 at 21:15

thornjad

1551 silver badge13 bronze badges

1 Comment

thornjad Over a year ago

Interesting, it doesn't for me. I think the issue is not with the conversion then. Maybe you should be using .value instead of .innerHTML to select the number.

MaxZoom · Accepted Answer · 2017-06-16 21:26:48Z

1

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>

edited Jun 16, 2017 at 21:26

answered Jun 16, 2017 at 21:14

MaxZoom

7,7635 gold badges30 silver badges45 bronze badges

Collectives™ on Stack Overflow

cannot convert input text to int in JavaScript

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related