A basic Javascript For loop

Question

A recent observation has deeply embezzled my knowledge of js. Look at the code below:

var x = "";

function postbody() {
    for (i = 0; i < 5; i++) {
        x = x + "<sup>" + i + "</sup><br/>";
        document.getElementById("posti").innerHTML = x;
    }

}

The above code's output is similar to that of the following & that is the thing vague to me

var x = "";

function postbody() {
    for (i = 0; i < 5; i++) {
        x = x + "<sup>" + i + "</sup><br/>";

    }
  document.getElementById("posti").innerHTML = x;
}

the latter code must giv me a single (to be concise last value of x) output & not the whole iterated output?

if it were getElementByID('post'+i) then that would have different outcomes — Alex Reynolds
– Alex Reynolds, Commented Sep 4, 2012 at 19:06

jbabey · Accepted Answer · 2012-09-04 19:04:11Z

1

Both snippets accomplish the same thing; The first snippet is just less performant as it overwrites the value 5 times as the string is built up instead of writing the final string once.

unrelated: i is an implicit global. use var.

answered Sep 4, 2012 at 19:04

jbabey

46.7k12 gold badges73 silver badges94 bronze badges

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

Comments

Dariush Jafari · Accepted Answer · 2012-09-04 19:04:55Z

0

both will cause a same result.

x = x + ...

answered Sep 4, 2012 at 19:04

Dariush Jafari

5,4538 gold badges45 silver badges74 bronze badges

Comments

GolezTrol · Accepted Answer · 2012-09-04 19:05:24Z

0

Sure it does. You add new code to x in each iteration and then set it in the element. setting innerHTML overwrites the entire content of the element.

In the first loop, each iteration will overwrite the html of the element with a little larger html, but the final iteration is the one that overwrites it with the 'complete' value of x.

So the end results are the same, but the first one is quite a bit slower.

answered Sep 4, 2012 at 19:05

GolezTrol

116k19 gold badges185 silver badges215 bronze badges

Comments

David G · Accepted Answer · 2012-09-04 19:05:28Z

0

The two examples are identical because on the first the innerHTML is being overwritten on each iteration while the value of the variable x is being concatenated with the other strings. By the last iteration, the element's innerHTML will have x's total value.

answered Sep 4, 2012 at 19:05

David G

97.6k41 gold badges173 silver badges258 bronze badges

Collectives™ on Stack Overflow

A basic Javascript For loop

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related