Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Loops, Arrays and Objects Tracking Multiple Items with Arrays Build a Quiz Challenge, Part 2 Solution

Sergey Golubev
Sergey Golubev
4,106 Points
Posted by Sergey Golubev
Sergey Golubev
4,106 Points

Theory question </ol>...

Hi everyone! i watched the course and evetything worked just fine with me, howerver there is a small detail which has no logic for me, at least now. In the last video of this stage Dave uses this example:

function buildList(arr) { var listHTML = '<ol>'; for (var i = 0; i < arr.length; i += 1) { listHTML += '<li>' + arr[i] + '</li>'; } listHTML += '</ol>'; return listHTML; }

I do understand why it's done that way, maybe my question will sound weird but still i need to know=) so we have this listHTML += '<li>' + arr[i] + '</li>'; which is basically listHTML = listHTML + '<li>' + arr[i] + '</li>'; which logically should multiple the <ol> in every stage of the look and should get smth like ol-li-li /ol-li-li e.t.c which doesnt make any sense, but at the end we have a perfect html list which we all familier with =) and even if we say this var will not be multiplied in any case, why cant we put the closing tag </ol> inside braces? like that:

function buildList(arr) { var listHTML = '<ol>'; for (var i = 0; i < arr.length; i += 1) { listHTML += '<li>' + arr[i] + '</li>' + '</ol>'; } return listHTML; }

Please, help, guys)

2 Answers

andren
andren
28,558 Points
andren
andren
28,558 Points

"which is basically listHTML = listHTML + '<li>' + arr[i] + '</li>'; which logically should multiple the <ol> in every stage"

Actually no, that logically wouldn't multiply the <ol>, = replaces the content on the left with that on the right, in other words you are saying that listHTML should be replaced entirely by what was in it with the new content added, you are not adding what is currently in listHTML to what is in listHTML.

To illustrate if I add a console.log printing out the content of listHTML during and after the loop this is the output:

<ol><li>Item 1</li>
<ol><li>Item 1</li><li>Item 2</li>
<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li>
<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>

In contrast with your proposed code with the </ol> added in the loop this is the output:

<ol><li>Item 1</li></ol>
<ol><li>Item 1</li></ol><li>Item 2</li></ol>
<ol><li>Item 1</li></ol><li>Item 2</li></ol><li>Item 3</li></ol>
<ol><li>Item 1</li></ol><li>Item 2</li></ol><li>Item 3</li></ol></ol>

The ol tag is closed multiple time but only opened once, which is clearly invalid code.

Note that the code was run with a list equal to ["Item 1", "Item 2", "Item 3"] since I don't have access to the list used in the video.

Sergey Golubev
Sergey Golubev
4,106 Points
Sergey Golubev
Sergey Golubev
4,106 Points

But i though listHTML += '<li>' + arr[i] + '</li>'; in this case += is just a shorthand for listHTML = listHTML + .... for instance (var i = 0; i < arr.length; i += 1) where i = i + 1 or when i change it to listHTML += 'add' + '<li>' + arr[i] + '</li>'; in console.log i get

<ol>add<li>W1</li> add<li>W2</li> add<li>W3</li></ol>

so an "add" appear on every step. Also if i replace the content on the left with that on the right then why the openning tag stays? your example explains it, but i dont understand why it works that way then...((

andren
andren
28,558 Points
andren
andren
28,558 Points

An "add" appears in every step of the code you post because it is added during the loop, in the buildList function the starting <ol> tag is added before the loop starts, it is not a part of the loop, just like adding the ending </ol> is also not a part of the loop.

+= is indeed just shorthand for variable = variable + somethingElse, but that does not result in the variable's value being doubled up.

var test = "ABC"
test = test + "D" // This is essentially saying test = "ABC" + "D"
// This replaces the content of test with what was in test (ABC) plus "D"
// So test now equals "ABCD"
test = test + "E"  // This is essentially saying test = "ABCD" + "E"
// This replaces the content of test with what was in test (ABCD) plus "E"
// So test now equals "ABCDE"
// The same is true with the listHTML variable, it's starting value is only added to, not repeated.