i want to pick how many div are in my html. so i used .length method but it is not giving me desire result. you can see a demo in here http://jsfiddle.net/WbwuC/
<style>
.main { width:980px; margin:0 auto; border:solid 1px #F00; overflow:hidden}
.box { width:300px; float:left; margin-right:20px; background:#00F; height:200px;}
.new {border:solid 2px #333;}
</style>
<script type="text/javascript">
var amy= document.getElementsByTagName('div');
for (i=0;i<amy.length;i++){
var jar= amy[i];
}
alert(jar)
</script>
</head>
<body>
<div id="main">
<div class="box"><h3>first</h3></div>
<div class="box"><h3>secnond</h3></div>
<div class="box"><h3>third</h3></div>
</div>
</body>
8 Answers 8
This doesn't work because at the time that the script executes the document hasn't processed as for as the divs in the body. Try to move your script under the divs, or wait for the document loaded event.
Comments
If your script runs while the page is loading, before the divs are present, there will be no divs yet. You should add a page load event to trigger the code. Your jsfiddle works btw... it has onload enabled for the code.
Comments
Here is the working demo . but really didn't understood what you expected. Please, Find the explanation of the code below.
var amy= document.getElementsByTagName('div');
Above line just selects the Div tags on HTML page. Now current HTML contains three DIV tags wrapped in main DIV, i.e. total 4 DIV elements. So, First alert is '4'.
for (var i=0;i<amy.length-1;i++){
var jar= amy[i];
alert(jar.innerHTML);
}
This code loops through four DIV tags. innerHTML is used to display the content inside that div. You will See, First The whole DIV block alerted. After this, Every div will be alerted.
Please, Let me know this is what you wanted ?
Comments
you can simply use .length. Just like this... jsFiddle
To be sure your DOM is entirely loaded, you can put the script simply at the end of your html document just before the closing body-tag.
HTH,
--hennson
Comments
Try this
for (i=0;i<amy.length;i++){
var jar= amy[i];
alert(jar) //put it here , ur problem will be solved
}
// alert(jar) //Dont put here
Comments
Change the script to this:
<script type="text/javascript">
var amy = document.getElementsByTagName('div');
for (i = 0; i < amy.length; i++) {
var jar = i;
}
alert(jar);
</script>
Comments
As you want the result to be 4, according to your clarifying comment, the easiest way is to use .length as you do in your loop in your own example!, no need to loop:
var length = amy.length; // Will return 4
If you however want to loop, you can use the loop you've presented like this (VERY unnecessary though, as you can use the length property as above!)
var length = 0;
for (i=0; i<amy.length; i++){
length++;
}
// After the loop has run, length will have value 4
For your code to work properly, you will have to wait with the execution until the DOM is ready.
Also, for your alert in your example, you are trying to alert an object. As the alert-method expect a string, it will turn your object into its string representation [object htmlDivElement].
Comments
Try this -
.main { width:980px; margin:0 auto; border:solid 1px #F00; overflow:hidden}
.box { width:300px; float:left; margin-right:20px; background:#00F; height:200px;}
.new {border:solid 2px #333;}
</style>
<script type="text/javascript">
function count() {
var amy= document.getElementsByTagName('div');
for (i=0;i<amy.length;i++){
var jar= amy[i];
}
alert(jar.className);
}
</script>
</head>
<body onload="count()">
<div id="main">
<div class="box"><h3>first</h3></div>
<div class="box"><h3>secnond</h3></div>
<div class="box"><h3>third</h3></div>
</div>
</body>
<body onload="alert(document.getElementsByTagName("div").length)"...>