CODEWITHSUNDEEP
javascript
Flower
Flower

Reputation: 61

JavaScript length property (basic)

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>

Upvotes: 2

Views: 99

Answers (3)

wentjun
wentjun

Reputation: 42576

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>

Upvotes: 1

Yngvarr
Yngvarr

Reputation: 121

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.

Upvotes: 2

saurabh
saurabh

Reputation: 2723

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>

Upvotes: 5

Related Questions