Mobile Number Tracker
Trace Mobile Number Earn Money Online
© TechWelkin.com

JavaScript: Count Items in HTML List

JavaScript is beautiful!
Samyak Lalit | June 18, 2012 (Last update: July 31, 2017)

Samyak Lalit is an Indian author and disability rights activist. He is the principal author and founder of projects like TechWelkin, WeCapable, Viklangta, Kavita Kosh among many others.

A friend of mine sent me a massive HTML list of items. This list was not ordered and was not supposed to displayed as ordered. But the total count of items in HTML list was to be displayed on the webpage.

Ordered HTML list (created with OL tag) are by default counted as each item is preceded by its number in the list. But the lists created using UL tag are not numbered. So, we need to count all the items to show it to the user.

If you are displaying this count of unordered list items on your page –you may not want to update the count every time you update the list. So, a dynamic solution is preferred in such a situation. With the help of JavaScript you can perform this task very easily.

JavaScript is beautiful!

The logic is simple. What we basically do is to get handle of the list you want to count and then walk through the nodes (i.e. list items) while incrementing a counter. When the loop is done, counter variable would contain the total number of items. Then you can print this count wherever you want on your web page.

Paste the following JavaScript code in the HEAD section of your page:

<script type='text/javascript'>
function countItems(listID){
var ul = document.getElementById(listID);
var i=0, itemCount =0;
while(ul.getElementsByTagName('li') [i++]) itemCount++;
document.write(itemCount);
}
</script>

And now place the following code at the place where you want to display the count.

<script> countItems('my-html-list')</script>

SEE ALSO: Randomize the items in an HTML list

Make sure that you replace ‘my-html-list’ with the id of your list. You can have any ID for your list. Also, please note, that you can use this function on ordered lists :-) It works on all both types of lists because both the lists contain LI items.

I hope this piece of code was useful for you. Do let me know if you have any problem with it. Thank you for using TechWelkin.

© TechWelkin.com

7 responses to “JavaScript: Count Items in HTML List”

  1. Comgreen says:

    Hi

    I tried paste the provided example:

    function countItems(listID){
    var ul = document.getElementById(listID);
    var i=0, itemCount =0;
    while(ul.getElementsByTagName(‘li’) [i++]) itemCount++;
    document.write(itemCount);
    }

    in the HEAD section of my page;
    and countItems(‘my-html-list’)
    at the place where I want to display the count.

    Surprising, there is no display of the count except only when I paste all the script after the unordered list in the page, then it is seen. Had tried on microsoft edge and google chrome with the same result. :(
    Also I tried to replace the output code of document.write with document.getElementById(‘txt’).innerHTML, surprisingly there is no output at my as it seems only document.write works. :(

    Was hoping can really display the count at any place, lol

    Thank you
    Comgreen

  2. Ladan says:

    …In the head tag I meant to say

  3. Ladan says:

    Having trouble getting mine to work. It shows it as all code rather than the expected result. I don’t know what I’m doing wrong. I put it in the place I want it to display, and have the first part in the .

  4. Plus Communication says:

    I have tried your javascript and it works well, but… I would like to count the list on other page than the list. So i have put this code countItems(‘my-html-list’)
    on other page and it doesn`t work. What should i do?

    • Lalit Kumar says:

      By “other page” if you mean a different HTML page, then JavaScript can not help you. Each URL loads with its private set of JavaScript and JS of one page can not access the HTML elements present on the other pages.

      • Plus Communication says:

        Do you have any other solution for my problem?

        • Lalit Kumar says:

          I saw the example that you sighted. JavaScript can’t help in this case. One solution could have been to use a custom PHP page but you’re using WordPress. I think, based on the kind of setup you have, the only solution is manually write the count and update it as and when required.

Leave a Reply

Your email address will not be published. Required fields are marked *