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>
4 answers
solution1
3 2014-02-20 20:51:39
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.
solution2
2 2014-02-20 20:55:31
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.
solution3
1 2014-02-20 21:06:50
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>");
}
}
solution4
0 ACCPTED 2014-02-20 20:54:18
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.