Why doesn't this for loop work?

Question

Why does these codes crush when i don't use var theLength in for loop? Why do i need to assign x.length to var theLength and use it in for loop to make it work? thanks, *nothing wrong with my question, stop putting my question on hold. someone is trying to learn.

  <html>
        <head>
            <script>
                window.onload= test;

                function test(){
                    var x=document.getElementsByTagName('*');
                    var theLength=x.length;
                    for(var i=0; i<x.length; i++){ // this i<x.length won't work
                                                 // But it will work with i<theLength
                        document.write("Hello World!<br>");
                    }
                }
            </script>
        </head>
        <body>  
        </body>
    </html>

Working fiddle with your own code: http://jsfiddle.net/xbmn9/. Although I would suggest changing the loop to `for (var i = 0, j = x.length; i < j; i++) { ... }`. — Cᴏʀʏ, Feb 20 '14 at 20:52
+1 This is actually a fair question. It seems people have downvoted this because they are incorrectly assuming there is no difference. — Matt, Feb 20 '14 at 20:58
[Why is document.write considered bad practice?](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) — dsgriffin, Feb 20 '14 at 21:10
@cookiemonster it indicates the doc write is the cause, and if you dig deeper, you will find the length changes — Huangism, Feb 20 '14 at 21:12
The code, as you have it, seems to work fine. see: http://jsfiddle.net/9H7Yq/ for(var i=0; i — Michael Ford, Feb 20 '14 at 20:51

score 3 · Answer 1 · answered Feb 20 '14 at 20:51

3

It's working in both cases. But when you assign

var theLength=x.length;

It's constant for whole loop. When you use x.length after each document write the value is increased by one. So loop is just endless.

answered Feb 20 '14 at 20:51

Ernest Nowacki

241
1
7

1

That would be the case if he was using `document.getElementsByTagName('*').length`, but since he gets the group and sets it to the variable `x`, before adding to the elements, `x` will not be affected by the DOM updates. – talemyn Feb 20 '14 at 20:55
1

well I tried it on FF 27.0.1 and it seems to be the case. When I inserted line if(x.length > 15) break; inside the loop it's working fine with for(var i=0; i – Ernest Nowacki Feb 20 '14 at 20:57
1

@talemyn: That's not correct. The result of `getElementsByTagName` is a live list. It automatically updates with changes to the DOM. – cookie monster Feb 20 '14 at 21:08
1

Yeah, apologies . . . I was just coming back to fix that . . . I was thinking with my jQuery hat on, not my JS hat. :) In jQuery, once you've set the results of a selector to a variable, changes to the DOM won't affect the length. The same is not true for vanilla JS. – talemyn Feb 20 '14 at 21:12
1

@talemyn: FWIW, the only exception I'm aware of in vanilla JS is `querySelectorAll()`, which will return a static list. – cookie monster Feb 20 '14 at 21:14

Marlo C · Answer 2 · 2014-02-20T21:08:04.740

Take this example:

x = document.getElementsByTagName('*'); // x.length = 5
theLength = x.length; // theLength = 5

for(var i = 0; i < x.length; i++) {

    document.write('hello');

    // after the first write(), x.length = 1
    // JavaScript is now confused of the new x.length value
}

The error happens because you are changing the value of x.length by writing to the document. The value of x will keep changing every time, which JavaScript is smart enough to detect and prohibit.

It works with theLength = x.length because theLength is a constant.

score 1 · Answer 3 · answered Feb 20 '14 at 21:06

It doesn't work because when you have x.length in the for loop - it's value is constantly increasing as you keep adding new dom elements. When you set the value before the for loop in the "theLength" variable, it's a fixed value of 4.

So it's definitely not the same thing. If you log the value of x.length inside your for loop you'll see it's value increasing with each iteration of the loop - so you've created an infinite loop!

        window.onload= test;

        function test(){
            var x=document.getElementsByTagName('*');
            var theLength=x.length;
            for(var i=0; i<x.length; i++){
                console.log(" x.length: " + x.length);                    
                document.write("Hello World!<br>");
            }
        }

score 0 · Accepted Answer · answered Feb 20 '14 at 20:54

It's because by writing the <br> tag to the document, you are adding a new Tag. So x increases in length while you are in the loop, and thus is an infinite loop.

You can try this from the console:

var x=document.getElementsByTagName('*');
x.length
document.write("Hello World!<br>")
x.length // will increase
document.write("Hello World!")
x.length // will stay the same

By assigning var theLength = x.length before you enter the loop, theLength remains the same no matter that you are adding additional tags. Hence the difference in behavior.

@Math, Thanks, perfect answer. To @Nick R, @Mario, @rkosegi, @CoderDennis, and @TimWolla you guys are so mean. Please if you don't help the `beginners` who try to `learn`, stop putting their questions on hold. — sopanha, Feb 21 '14 at 00:20

Why doesn't this for loop work?

4 Answers4