Javascript return zero array size

Question

I have a simple html page with javascript

var myitems = document.getElementsByClassName("img");
for (var z = 0; z <= myitems.length; z++) { 
   alert("hello" + myitems.length);
}

part of my html page-

<a href="#"><img class="img" src="image/100.jpg" alt="z"/></a>
<a href="#"><img class="img" src="image/200.jpg" alt="z"/></a>
<a href="#"><img class="img" src="image/400.jpg" alt="z"/></a>
<a href="#"><img class="img" src="image/300.jpg" alt="z"/></a>

my problem is myitems.length always return 0, when it should be 4.

Can you replicate with a [JSFiddle](http://jsfiddle.net/)? It [works fine for me](http://jsfiddle.net/s23rd/) — musefan, Jul 29 '14 at 09:53
this is working properly in jsfidle http://jsfiddle.net/U9CMe/ please give the entire code or , where have you placed your script ,may be your script runs before your elements are loaded — Domain, Jul 29 '14 at 09:55
it's working in http://jsfiddle.net/S6Kh6/ but whats wrong in WebMatrix? I closed refreshed page, still not working. — The_ehT, Jul 29 '14 at 09:56
place your script in script tags after this elemnts , and check if it works — Domain, Jul 29 '14 at 09:58

score 2 · Accepted Answer · edited May 23 '17 at 12:14

Several reasons your query could fail:

You are running the code too early, before that part of the DOM has been parsed.
The DOM elements are created dynamically (by some other code) so you have to run your code after that code runs.
There are errors in your HTML so what you think is in the page is not what the browser ends up parsing.
There are errors in your javascript code so it aborts executing before doing everything you wanted it to.

The most common issue is #1. The fix is to either make sure your code is placed AFTER those elements in the page HTML, use a framework that tells you when the document is ready or subscribe to an event yourself so you can know when the document is ready.

If you're interested in a single plain javascript function call that can tell you when the document is ready in all browsers, you can grab the code here: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it though probably all you need to do is to move your <script> tag after the DOM elements you want to query for (e.g. to the end of your HTML right before the </body> tag like this:

<html>
<body>
<a href="#"><img class="img" src="image/100.jpg" alt="z"/></a>
<a href="#"><img class="img" src="image/200.jpg" alt="z"/></a>
<a href="#"><img class="img" src="image/400.jpg" alt="z"/></a>
<a href="#"><img class="img" src="image/300.jpg" alt="z"/></a>
<script>
var myitems = document.getElementsByClassName("img");
for (var z = 0; z <= myitems.length; z++) { 
   alert("hello" + myitems.length);
}
</script>
</body>
</html>

declaring javascript below element works, but isn't it equivalent to calling function after window.onload? — The_ehT, Jul 29 '14 at 10:14
@user1517029 - `window.onload` is called much later AFTER all the image content has finished loading (not just the DOM elements). There can easily be many seconds difference in timing between when the DOM is ready and done parsing and when all image content specified in the DOM has finished loading (particularly with larger images or slower network connections). In modern browsers, the `DOMContentLoaded` event is triggered when the DOM is done parsing. In older browsers, other techniques can be used to figure out when the DOM has finished parsing. — jfriend00, Jul 29 '14 at 10:19
thanks for your explanation.now I understand the cause is reason 1. — The_ehT, Jul 29 '14 at 10:40

score 1 · Answer 2 · answered Jul 29 '14 at 10:01

try this,

<a href="#"><img class="img" src="image/100.jpg" alt="z"/></a>
<a href="#"><img class="img" src="image/200.jpg" alt="z"/></a>
<a href="#"><img class="img" src="image/400.jpg" alt="z"/></a>
<a href="#"><img class="img" src="image/300.jpg" alt="z"/></a>
<script>
var myitems = document.getElementsByClassName("img");
for (var z = 0; z <= myitems.length; z++) { 
   alert("hello" + myitems.length);
}
</script>

score 0 · Answer 3 · answered Jul 29 '14 at 09:57

Works for me in JSFiddle. So perhaps it depends on where you have your Javascript located in the code. If your snippet is located before your Elements, it will return a length of 0, because at the time the Javascript is computed, there are no elements in the DOM. If you put the Javascript at the end of your document it should work.

Edit: To find Errors in your Javascript, you can use the Firebug-Console

Javascript return zero array size

3 Answers3