CODEWITHSUNDEEP
javascripthtmlfor-loop
sopanha
sopanha

Reputation: 345

Why doesn't this for loop work?

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>

Upvotes: 1

Views: 206

Answers (4)

Marlo C
Marlo C

Reputation: 617

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.

Upvotes: 2

edwh
edwh

Reputation: 58

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>");
            }
        }

Upvotes: 1

Matt
Matt

Reputation: 20786

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.

Upvotes: 0

Ernest Nowacki
Ernest Nowacki

Reputation: 241

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.

Upvotes: 3

Related Questions