Syed Ameed Syed Ameed - 4 years ago 255
HTML Question

Array .length property returning 0 for document.getElementsByClassName in JavaScript

I have a list of

li
elements with one class in my HTML. I want to grab them all and place them in an array and then find out how many have I grabbed. However, whenever I try to output the
.length
property of the array that the
document.getElementsByClassName
is in, it is just resulting to
0
. Here's my code:

function activateFeedMain() {
console.log('Function Called');
var clickInfo = document.getElementsByClassName('miniInfo');
var showInfo = document.getElementsByClassName('moreInfo');

console.log(clickInfo.length);
}

activateFeedMain();


Here's the HTML:



<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta id="refresh" http-equiv="refresh" content="300">
<title>News and Events</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/hfreplacement.js"></script>
<script type="text/javascript" src="scripts/news.js"></script>
<style type="text/css">
#content-col1 ul {list-style-type: none;}
#content-col1 ul li {background-color: #66FFCC; border-radius: 5px; padding: 12px; margin-bottom: 8px;}
#content-col1 ul li:hover {background-color: #FFFFCC;}
.description {font-weight: bold; font-style: italic;}
.date, .type, .approval {font-size: 12pt; padding-right: 25px; padding-left: 18px; display: inline-block; border-right: 1px solid black;}
.date {padding-left: 0px;}
.approval {border: none;}
.invisible {display: none;}
#content-col1 ul a:hover {text-decoration: none;}
#content-col1 ul a {text-decoration: none; cursor: pointer;}

</style>
</head>

<body>
<div id="head"></div>

<div id="content">
<div id="content-col1">
<p class="note">Refresh for updates</p>
<script>newsContent();</script>
</div>

<div id="content-col2">
<h1>Latest</h1>
<ul>
</ul>
</div>
</div>

<div id="foot"></div>
<script type="text/javascript">
function activateFeedMain() {
console.log('Function Called');
var clickInfo = document.getElementsByClassName('miniInfo');
var showInfo = document.getElementsByClassName('moreInfo');

console.log(clickInfo.length);
}

activateFeedMain();
</script>
</body>
</html>


The Script
newsContent();
installs all the
li
s in the
ul
. On a side note, when I use
console.log(clickInfo)
it is giving me the list of array. Something has to do with the
.length
property...

Also, when I try to use
console.log(clickInfo[1]);
, it's giving me undefined...

Answer Source

Working fiddle

The reason that you're having this issue is because your newsContent function is dynamically creating creating the content on the page asynchronously, in parallel with your activateFeedMain function. Since they're being called at the same time, the elements from your newsContent function haven't been created at the time that activateFeedMain is being called.

You can solve this issue by giving newsContent a callback function that will be executed when it's finished running.

function activateFeedMain() {
    console.log('Function Called');
    var clickInfo = document.getElementsByClassName('miniInfo');
    var showInfo = document.getElementsByClassName('moreInfo');

    console.log(clickInfo.length);
}

// Call activateFeedMain() once newsContent has finished
newsContent(activateFeedMain);

And where you define newsContent, design it to take a callback like so:

function newsContent(callback){

    ...

    // When this function is done
    if(typeof callback === 'function'){
        callback();
    }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download