Looping Arrays

[bmjaczynski]

For this example:

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;

text = "<ul>";
for (i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

why does the last line output as </ul> instead of <ul></ul>? Since it is using the += operator.

[JMRKER]

I don't see the problem.

It appears to be working correctly.  Add an alert(text) at the end to see results.

What do you expect to see differently?

 

[bmjaczynski]

Yes it's correct code, but I'm new to coding so it seems my logic is flawed when I try to break it down and I'm not sure why. Why isn't the variable 'text' being looped since it's looping what looks to me like:

for (i = 0; i < fLen; i++) {
    text += "<li>" + fruits[i] + "</li>";     // "<ul>" = "<ul>" + "<li>" + fruits[i] + "</li>"
}

Same for the last line:

text += "</ul>";  // "<ul>" = "<ul>" + "</ul>"

 

[dsonesuk]

It appends open ul, then the looping of li elements with array fruit values, and finishes with closed ul element at end after looping is finished.