Refactor Challenge, don't understand why function doesn't work

If the function returns a value, then writing that function to the document is writing that value (in this case the html string) to the document. His function didn't have a return value (in other words had a return value of undefined), and therefore that's what he was writing to the document. As far as I know, it doesn't have anything to do with specifying the <div> sizes. It's certainly not best practice to write inline css to style your elements.

That said, your function certainly works, it just approaches the problem differently by writing the html string and appending to the document all in one go. But my example, returning a string, will also have the desired effect.

Yeah I tested in Node, with a console.log(tenDots()) instead of a document.write:

> console.log(tenDots());
<div style="background-color:rgb(235,136,162)"></div><div style="background-color:rgb(12,214,142)"></div><div style="background-color:rgb(45,91,193)"></div><div style="background-color:rgb(242,63,211)"></div><div style="background-color:rgb(11,165,21)"></div><div style="background-color:rgb(208,72,53)"></div><div style="background-color:rgb(22,91,251)"></div><div style="background-color:rgb(162,74,22)"></div><div style="background-color:rgb(93,238,138)"></div><div style="background-color:rgb(118,132,225)"></div>
undefined

Ha not the best way to post a console log. But you get the idea. When you call a function that returns a string, it's the same thing as setting a variable to that string and referencing it:

var helloWorld = "Hello World!"

function returnHelloWorld() {
  return "Hello World!"
}

helloWorld === returnHelloWorld() // returns true

Perhaps a better way to put it would be to set the function's return value to a variable, then write it to the document that way:

var tenDotsString = tenDots();
document.write(tenDotsString);

That said, I haven't done this exercise/challenge. I assume they would have a separate CSS file that specifies the size of any div on the page, because it really is a good idea to avoid all that inline styling. Especially when presumably we're all learning the basics of JavaScript.

We should probably keep our discussion confined to the comments; no need to add extra answers. I went ahead and found the teacher's solution to the problem:

var html = '';
var red;
var green;
var blue;
var rgbColor;

for (var i = 0; i < 10; i += 1) {
  red = Math.floor(Math.random() * 256 );
  green = Math.floor(Math.random() * 256 );
  blue = Math.floor(Math.random() * 256 );
  rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
  html += '<div style="background-color:' + rgbColor + '"></div>';
}

document.write(html);

As I suspected, the project files include a stylesheet that takes care of styling the dots for you. All the student needs to do is write the script - no styling or class names needed. In this case, Dave (the teacher) didn't use a function to create the string, but I hope you can see that document.write(tenDots()) is a valid solution when tenDots() returns a string.

good point