I don't understand the logic of this answer

Question

I get completely different answers when I place the code [ document.write(text); ] inside/outside the loop below but can't figure out the logic. Especially the answer that shows when inside. Why is this?

var text = "";

for (i = 0; i <= 10; i++) {

text += "The number is " + i + "<br>";
document.write(text);

}

This is the current answer I have

The number is 0 The number is 0 The number is 1 The number is 0 The number is 1 The number is 2 The number is 0 The number is 1 The number is 2 The number is 3 The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 The number is 6 The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 The number is 6 The number is 7 The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 9 The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 9 The number is 10

[`document.write()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/write) rewrites the whole page, if executed after page load, don't use it. Use DOM methods and properties to manipulate the page. — Patrick Evans, Jul 29 '16 at 00:24
With each loop iteration, you're appending to the existing `text` variable, thus adding another line of *"The number is..."* and you're also writing it out with each loop iteration. If you move the `write` outside the loop, you'll only write it out once — Phil, Jul 29 '16 at 00:24
Can you be more specific about what you don't understand? You're adding text to a string, and outputting it each time. The string will get longer and longer with each iteration. — 4castle, Jul 29 '16 at 00:24
@Nunchy my answer continues on like this until it gets to 10....... The number is 0 The number is 0 The number is 1 The number is 0 The number is 1 The number is 2 The number is 0 The number is 1 The number is 2 The number is 3 The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 0 The number is 1 The number is 2 — user6652015, Jul 29 '16 at 00:27
How is this a duplicate of completely different question? xD — Robo Robok, Jul 29 '16 at 00:28
Welcome to Stack Overflow. Please [edit] your question to explain what the expected behaviour is, and what the actual behaviour is. (The information in your last comment should've been in the question.) — nnnnnn, Jul 29 '16 at 00:29
@4castle I don't understand why I get the answer (I responded to Nunchy) when that code is placed inside the loop. I expected "The number is 1...The number is 2...10" — user6652015, Jul 29 '16 at 00:30
How many times do you want to output the string? If you want it to output 10 times seeing the value of `text` at each iteration, then put it inside. If you want to see only the final value, put it outside. I'm really confused. Do you know what `for` does? — 4castle, Jul 29 '16 at 00:30
@4castle I was pretty sure I understood for until this. What I'm unsure about is why does it keep jumping back to zero? the pattern is 0...01..012..0123. What I expected was 012345...10 — user6652015, Jul 29 '16 at 00:35
The current code outputs a big block of text such that it is hard to see what was output during each iteration of the loop. You could see more clearly what is happening if you changed the `.write()` statement to say `document.write("Iteration " + i + " output: " + text);` — nnnnnn, Jul 29 '16 at 00:38

score 0 · Answer 1 · answered Jul 29 '16 at 00:34

I think I understand...ok so you expect it should output:

the number is 0
the number is 1
the number is 2
the number is 3
the number is 4
the number is 5
the number is 6
the number is 7
the number is 8
the number is 9
the number is 10

What you are doing is appending each output to the string, so the string on the first pass of the loop is

the number is 0

On the next pass you are adding the string "the number is 1" to the string you already have...which makes it

the number is 0
the number is 1

But on each pass of the loop, you are outputting the string, so you output the same lines multiple times.

You could do:

var text = "";

for (i = 0; i <= 10; i++) {
    text += "The number is " + i + "<br>";
}

document.write(text);

You don't have to output on each iteration of your loop if you intend to dump the entire string at the end.

Alternatively, if using `document.write()` *inside* the loop, assign the values to `text` with `=` instead of `+=`. — nnnnnn, Jul 29 '16 at 00:35

4castle · Answer 2 · 2016-07-29T00:40:46.673

If you want your output to be

The number is 0
The number is 1
The number is 2
...
The number is 10

You either need to output at the end of the loop, or just output at each iteration without using +=.

These have the same output:

var text = "";
for (var i = 0; i <= 10; i++) {
    text += "The number is " + i + "<br>";
}
document.write(text);

And

for (var i = 0; i <= 10; i++) {
    document.write("The number is " + i + "<br>");
}

Similarly, these both have your undesired output:

var text = "", allText = "";
for (var i = 0; i <= 10; i++) {
    text += "The number is " + i + "<br>";
    allText += text;
}
document.write(allText);

And

var text = "";
for (var i = 0; i <= 10; i++) {
    text += "The number is " + i + "<br>";
    document.write(text);
}

Thank you. That side by side I helpful. – user6652015 Jul 29 '16 at 00:41 — user6652015, Jul 29 '16 at 00:41

I don't understand the logic of this answer

2 Answers2