JavaScript JavaScript Loops, Arrays and Objects Simplify Repetitive Tasks with Loops The Refactor Challenge, Part 2

Jose Perez Lopez
Jose Perez Lopez
4,314 Points

My program does not run if I print the content, in this case print(html); outside of the for loop.

When I put my function to printout the divs onto the page, my program does not run, however, when I put it inside the for loop, it runs just fine.

var html = ' '; var rgbColor = ''; function getRandomColor(){ return Math.floor(Math.random() * 256); } function color(){ return rgbColor += 'rgb(' + getRandomColor() + ',' + getRandomColor() + ',' + getRandomColor() + ')'; } function printDoc(message){ document.write(message); } for(var i = 0; i < 300; i++){ html += '<div style="background-color:' + color() + '"></div>'; html = ''; rgbColor = ''; } printDoc(html); <<<------ OUTSIDE THE FOR LOOP

This does not run

var html = ' '; var rgbColor = ''; function getRandomColor(){ return Math.floor(Math.random() * 256); } function color(){ return rgbColor += 'rgb(' + getRandomColor() + ',' + getRandomColor() + ',' + getRandomColor() + ')'; } function printDoc(message){ document.write(message); } for(var i = 0; i < 300; i++){ html += '<div style="background-color:' + color() + '"></div>'; printDoc(html); <<------ INSIDE THE FOR LOOP html = ''; rgbColor = ''; } But this does

1 Answer

KRIS NIKOLAISEN
PRO
KRIS NIKOLAISEN
Pro Student 47,285 Points

You should try console.log(html) just before printDoc(html) to show what you are trying to write. Anyways I modified your color() function to not concatenate rgbColor, and removed html = '' from your loop and it appears to function correctly:

var html = '';

function getRandomColor(){ 
    return Math.floor(Math.random() * 256);
                         }
function color(){
    return 'rgb(' + getRandomColor() + ',' + getRandomColor() + ',' + getRandomColor() + ')';
                }

function printDoc(message){
    document.write(message);
}

for(var i = 0; i < 300; i++){
    html += '<div style="background-color:' + color() + '"></div>'; 
    }

console.log(html)
printDoc(html)