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?

If neither of your alerts are showing up, looks mostly like you have an error in another place (or maybe getElementById is returning null), try to debug your script, I would recommend Firebug, just open the Console and load your page, you will see the error messages... — Christian C. Salvadó
– Christian C. Salvadó, Commented Feb 8, 2010 at 23:26

Jacob · Accepted Answer · 2010-02-08 23:25:28Z

2

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');

answered Feb 8, 2010 at 23:25

Jacob

79k24 gold badges159 silver badges245 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Waleed Al-Balooshi Over a year ago

Make sure that you have an element with that particular id in your document.

Gordon Tucker Over a year ago

It will also return null if you are calling it before the page has loaded. If you move this script to the end of the body tag do you still get null?

Hristo Over a year ago

I do. I have a div... <div id="mainNav"> ... and inside it is the set of list items. Could the problem be that I'm calling another file. <div id="mainNav"> <ORPR:MainNav runat="server" id="nav1" /> </div>

Hristo Over a year ago

ahhh Thanks! It worked when I moved it to the end of the page. Is there a way I can have this work by not having it at the end of the page?

Gordon Tucker Over a year ago

put in in a function that is called on load . If you use jquery it is document.ready(function(){ /*your code here */ }); in Mootools it is window.addEvent('domready',function(){ /* your code here */ }); with just plain javascript it would be window.onload = function(){ /* your code here */ };

jonycheung · Accepted Answer · 2010-02-08 23:33:00Z

0

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.

answered Feb 8, 2010 at 23:33

jonycheung

8601 gold badge6 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related