loop in javascript not working

Question

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>

You are alerting the html div, not the length property. See my comment for an updated jsFiddle. No loop required.. — PatrikAkerstrand
– PatrikAkerstrand, Commented Mar 19, 2012 at 11:23
why don't you do a <body onload="alert(document.getElementsByTagName("div").length)"...> — Salman Arshad
– Salman Arshad, Commented Mar 19, 2012 at 11:23

shanethehat · Accepted Answer · 2012-03-19 11:18:30Z

6

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.

answered Mar 19, 2012 at 11:18

shanethehat

15.6k11 gold badges59 silver badges87 bronze badges

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

Comments

Willem · Accepted Answer · 2012-03-19 11:21:44Z

3

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/

answered Mar 19, 2012 at 11:21

Willem

5,4042 gold badges25 silver badges44 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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 ?

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 19, 2012 at 11:29

Umesh Patil

10.7k16 gold badges56 silver badges81 bronze badges

Comments

hennson · Accepted Answer · 2012-03-19 11:35:05Z

1

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

answered Mar 19, 2012 at 11:35

hennson

8095 silver badges7 bronze badges

Comments

Akhil Thayyil · Accepted Answer · 2012-03-19 11:20:30Z

0

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

answered Mar 19, 2012 at 11:20

Akhil Thayyil

9,4256 gold badges38 silver badges48 bronze badges

Comments

hjpotter92 · Accepted Answer · 2012-03-19 11:21:01Z

0

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>

answered Mar 19, 2012 at 11:21

hjpotter92

81.1k36 gold badges148 silver badges188 bronze badges

Comments

Christofer Eliasson · Accepted Answer · 2012-03-19 11:27:05Z

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

Bhabani Sankar Mishra · Accepted Answer · 2012-03-19 11:31:32Z

0

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>

answered Mar 19, 2012 at 11:31

Bhabani Sankar Mishra

5232 gold badges8 silver badges21 bronze badges

Collectives™ on Stack Overflow

loop in javascript not working

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related