My HTML contains a list of li elements with one class. I am attempting to collect them all and place them in an array to determine how many have been gathered. However, when I attempt to display the number using the .length property of the array returned by document.getElementsByClassName, it always shows as 0. Here is my code:
function activateFeedMain() {
console.log('Function Called');
var clickInfo = document.getElementsByClassName('miniInfo');
var showInfo = document.getElementsByClassName('moreInfo');
console.log(clickInfo.length);
}
activateFeedMain();
Here is the relevant HTML snippet:
<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(); places all the lis into the ul. Interestingly, while console.log(clickInfo) successfully displays the array, there seems to be an issue with the .length property...
Moreover, upon using console.log(clickInfo[1]);, it returns undefined...