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 Simplify Repetitive Tasks with Loops The Refactor Challenge, Part 2

Otec Perez Glass
Otec Perez Glass
7,678 Points
Posted by Otec Perez Glass
Otec Perez Glass
7,678 Points

The Refactor Challenge, Part 2

Heloo

// this is how i did it

    var html = '  ';
    var rgbColor;
    var flag = true;

    function Reload(){location.reload();}

    function repeatedCode(){return Math.floor(Math.random() * 256 );}

    var otec = function(){
    rgbColor = 'rgb(' + repeatedCode() + ',' + repeatedCode() + ',' + repeatedCode() + ')';
    html += '<div style="background-color:' + rgbColor + '"></div>';
     }

    for (var x =1; x <=10 ;x++){
    otec(); 
    if (x == 10){
      flag = false;
     }
    }
    document.write(html);
    Reload();

I was wondering if i can find a way of making a delay and changing the different colors without reloading the entire page.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Wrap your code around

/```javascript

/```

Without brackets.

No one will help you that way, can't see the code.

Otec Perez Glass
Otec Perez Glass
7,678 Points
Otec Perez Glass
Otec Perez Glass
7,678 Points

Aurelian Spodarec Thanks the suggestion

2 Answers

Jacob Mishkin
Jacob Mishkin
23,118 Points

Hi Otec Perez Glass

Yes you can! you can use the SetInterval function in JavaScript. Here is an example on how to use it: 

var x = document.body;
var color = ["blue", "green", "yellow", "red"];
setInterval(function() {
   for(let y = 0; y < 4; y++){
    x.style.backgroundColor = color[Math.floor(Math.random() * 3)];  
  }
}, 500) ;

This example shows how to change the color on the body element, you can change this to be your divs. what we do is create an array of colors, then use the setInterval function to loop through the element we want to change. This is a basic example, but you can change it as your like. when you start using array methods please feel free to update this code as your progress.

Otec Perez Glass
Otec Perez Glass
7,678 Points
Otec Perez Glass
Otec Perez Glass
7,678 Points

Hey thanks! for the help, for sure will do.

Jacob Mishkin
Jacob Mishkin
23,118 Points

No problem! If you have any questions please feel free to ask.

Otec Perez Glass
Otec Perez Glass
7,678 Points
Otec Perez Glass
Otec Perez Glass
7,678 Points

I finally got it. Jacob Mishkin 

let  html = '';
let Arrays = ['A','B','C','D'];
let Color = ['Lightgrey','Lightgreen','coral','purple'];

let random = () =>   Math.floor(Math.random() * 4 );

let print = message => {
  let bodyID = document.getElementById('color');
  bodyID.innerHTML = message;
}

for (let x = 0; x < Arrays.length; x++){

   html +=  `<div class = ${Arrays[x]}></div>`;
}


// Create the Divs Random Colors
setInterval(() => {

for (let x = 0; x  <  Arrays.length;  x++){

let divColorControl  =  document.querySelector(` div.${Arrays[x]} `);
divColorControl.style.backgroundColor  =  Color[ random() ]
}
}, 1000)


print(html);

Thanks for the advice!

Jacob Mishkin
Jacob Mishkin
23,118 Points

Awesome!!