create array of <li>s in a specific div using javascript

Question

I'm trying to create an array of <li> that are in a div. So I have

var arr = document.getElementById('mainNav').getElementsByTagName('li');

For testing purposes, I put an alert("test"); alert(arr.length); to see if an alert will pop up and what the size of the array is. Neither of the alerts showed up, but if I place an alert before that variable declaration, it works fine. What could be going wrong?

Answer 1

Perhaps your alerts aren't showing up because document.getElementById('mainNav') is returning null. Check if you're getting a Javascript error. Or break up your code into multiple lines to make it easier to see where the error is occuring:

var mainNav = document.getElementById('mainNav');
alert(mainNav);
var arr = mainNav.getElementsByTagName('li');

Answer 2

If you are sure that you have the LI elements within "mainNav". Try to put your code in the onLoad function:

window.onload = function(){
var arr = document.getElementById('mainNav').getElementsByTagName('li');

}

Your code maybe executing before the element is created.