Why do we need to return the string?

Hi there! Remember a day or two ago when I helped with the random color generator you had? And we fixed the problem. This is a great example of that same problem.

In the first example, he used print(listHTML) from inside the function. Because listHTML is declared inside that function, it is only available while the function is executing. So if we use it then to print out, it's ok.

But in the second example, he uses code outside that function to print out. Which means that we have to get that HTML string we just built up in that function and send it into the spot that needs it. To do that we have to call the function. The function will then return or send back its result to the place that called it.

Let's take a look at a simple example I whipped up for you:

function returnZ() {
  var x = 2;
  var y = 3;
  var z = x + y;
  return z;
}

var num1 = 8;

console.log(num1);
console.log(returnZ());
// console.log(x);

You might want to try this out in the console. Because our num1 is declared outside the function, JavaScript recognizes it and can log it to the console. In the second log to the console we call the returnZ function which then returns a value of 5. That number is logged to the console. But if you uncomment that last line, you'll receive an error. Because x does not exist outside the function... only inside. This is a concept known as "scope" and can take a little while to grasp. I hope this helps!

edited for additional note

In regards to your random color generator, this was essentially what you were doing. You'd used a function to build up the RGB color, but then you weren't sending it anywhere. And you were trying to access that variable from outside the function. That's why we implemented a call to the function generating your color and had it pass along the result to the piece of code that called it