JavaScript length property (basic)

Question

I apply ".length" on the element has id="name", but it counts 29 instead of 14. I wonder where is my mistake? It would be nice if someone can let me know. Thank you!

var name=document.getElementById('name');
var totalTiles=document.getElementById('totalTiles');

totalTiles.textContent=name.length;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>
<body>
    <div id="heading"></div>
    <table>
        <tr>
            <th>Custom sign:</th>
            <td id='name'>Montague House
            </td>
        </tr>
        <tr>
            <th>Total tiles:</th>
            <td id='totalTiles'></td>
        </tr>
    </table>
    <button>Pay Now</button>
    <script src="script.js"></script>
</body>
</html>

console.log the name element itself instead of it's length and you will see why — Dexygen
– Dexygen, Commented Sep 22, 2019 at 12:52

saurabh · Accepted Answer · 2019-09-22 12:58:06Z

5

This is happening because the name variable is the entire dom element (td).

Try using innerText to get the required value

var name = document.getElementById('name').innerText;
var totalTiles = document.getElementById('totalTiles');

totalTiles.textContent = name.length;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>

<body>
  <div id="heading"></div>
  <table>
    <tr>
      <th>Custom sign:</th>
      <td id='name'>Montague House
      </td>
    </tr>
    <tr>
      <th>Total tiles:</th>
      <td id='totalTiles'></td>
    </tr>
  </table>
  <button>Pay Now</button>
  <script src="script.js"></script>
</body>

</html>

answered Sep 22, 2019 at 12:58

saurabh

2,7332 gold badges23 silver badges29 bronze badges

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

Comments

Yngvarr · Accepted Answer · 2019-09-22 12:59:51Z

2

Because the name variable returns [object HTMLTableCellElement] and not the string you intended to return. The length of the [object HTMLTableCellElement] is 29 so that's what the length property returns.

To get the value of the actual string you need to count the length of the variable after applying the .innerText property.

answered Sep 22, 2019 at 12:59

Yngvarr

1211 silver badge4 bronze badges

1 Comment

Flower Over a year ago

I got it. Thank you!

wentjun · Accepted Answer · 2019-09-22 13:00:05Z

1

This is because you are returning the entire HTMLTableCellElement on the getElementById selector.

I would recommend you to use textContent or innerHTML to get the text values. However, you should be using textContent instead, as it utilises the text vaules and does not need to parse HTML, thus it is faster.

In addition, you might want to use the trim() method to remove the trailing white spaces.

const name = document.getElementById('name').textContent.trim();
const totalTiles = document.getElementById('totalTiles');

totalTiles.textContent = name.length;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>

<body>
  <div id="heading"></div>
  <table>
    <tr>
      <th>Custom sign:</th>
      <td id='name'>Montague House
      </td>
    </tr>
    <tr>
      <th>Total tiles:</th>
      <td id='totalTiles'></td>
    </tr>
  </table>
  <button>Pay Now</button>
  <script src="script.js"></script>
</body>

</html>

answered Sep 22, 2019 at 13:00

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

1 Comment

Flower Over a year ago

Thank you for you help!

Collectives™ on Stack Overflow

JavaScript length property (basic)

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related