Counting elements with Javascript

Question

I am kind of a newbie, so I am not sure where to look for my mistake. I am want to count all rows of a certain table, but I need to have the number above/inside the table itself. However, I only get the number of rows above the point where I call the function, but I need the number of rows of the entire table.

(...)
<script type="text/javascript">
function countRows()
{
   rowsCount = document.getElementById("list").rows.length;
   return rowsCount;
}
</script>

<body>

<table id="list">
<tr><td>
There are 
<script type="text/javascript"> document.write(countRows()) </script> 
rows here. // Returns "1"
</td></tr>

<tr><td>(Stuff goes here)</td></tr>
<tr><td>(Stuff goes here)</td></tr> // script would return "3" here.
<tr><td>(Stuff goes here)</td></tr>
<tr><td>(Stuff goes here)</td></tr>
(...)

No jQuery here! I know it is nice, but I can't use it in this case.

At the moment you are executing the code, there exist only one row. If you want to count all of them, you have to put the code after the table. Tip: Don't use `document.write`. — Felix Kling, Jun 17 '13 at 14:16
You need to call the script later - or add a timeout to delay the function call, or similar. — sje397, Jun 17 '13 at 14:17
Your function can only count the rows that exist at the time you execute it. Put it in a window.onload function at the botton of the page, and use getElementById().innerHTML to put the result in the right place — , Jun 17 '13 at 14:18

score 4 · Answer 1 · edited May 23 '17 at 11:56

4

Try this:

window.onload = function()
{
    var tbl = document.getElementById("list");
    document.body.innerHTML += tbl.lrows.length;//or tbl.rows[0].cells[0].innerHTML
};

The onload event fires after the page is fully loaded, this includes the full table. You can't count the number of rows until they're all there... makes sense, doesn't it? :P

Oh, and please, since you're learning still, don't learn the wrong things, like document.write: it's flawed in a bad way.
I know it doesn't seem important at this point, but also note that you're creating the most evil of variables with rowsCount: an implied global. Don't, just don't ever do that. Get in the habit of declaring all variables you want to use, as to not clutter the global namespace. (That, and if you don't your script will fail in strict mode).

edited May 23 '17 at 11:56

Community

1
1

answered Jun 17 '13 at 14:17

Elias Van Ootegem

67,812
9
101
138

And what is the right way to squeeze a single number into a HTML-Text? I tried to look it up, but all I find is document.write. Also the code works, but now the "5" is inserted at the end of my HTML and I am now more confused as I was before. :( – Yara Jun 17 '13 at 14:39
Found a solution, will answer later, then the site lets me. – Yara Jun 17 '13 at 15:11
@Yara: The `innerHTML` property of a DOM node is where you want to insert the number. If you want to show the number in, say, the first cell of the table: `tbl.rows[0].cells[0].innerHTML = tbl.rows.length` is what you will have to use. Document.write _opens_ the implicitly closed document and overwrites it... which might leave you with an empty page, just containing a number – Elias Van Ootegem Jun 18 '13 at 09:11

Counting elements with Javascript

1 Answers1