CODEWITHSUNDEEP
javascripthtml
Jitender
Jitender

Reputation: 7971

loop in javascript not working

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>

Upvotes: 2

Views: 160

Answers (8)

hennson
hennson

Reputation: 811

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

Upvotes: 1

Bhabani Sankar Mishra
Bhabani Sankar Mishra

Reputation: 523

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>

Upvotes: 0

Umesh Patil
Umesh Patil

Reputation: 10685

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 ?

Upvotes: 2

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

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].

Upvotes: 0

Willem
Willem

Reputation: 5404

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.

http://jsfiddle.net/EEjaP/

Upvotes: 3

hjpotter92
hjpotter92

Reputation: 80639

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>

Upvotes: 0

Akhil Thayyil
Akhil Thayyil

Reputation: 9403

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

Upvotes: 0

shanethehat
shanethehat

Reputation: 15570

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.

Upvotes: 6

Related Questions