Home » Jquery » Show 3 random colors at once every 4 seconds with jQuery-Exceptionshub

Show 3 random colors at once every 4 seconds with jQuery-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I have this code and I’m trying to show 3 random colors from an array, at once, every 4 seconds, but instead I get 1 color every 4 seconds, even if they are properly randomized…

What am I missing?

//set colors
var colors = ["white", "red", "blue", "yellow", "orange", "brown", "black", "violet", "purple", "pink", "green"];

//pick 3 of them randomly
var three_random_colors = (n) => {
    return colors.reduce((memo, val, index) => {
        var p = (n-memo.length); // How many remaining to choose.
        var q = colors.length-index; // How many remaining to choose from.
        if (Math.random() < p/q){
            memo.push(val);
        }
        return memo;
    }, []);
};

//output the colors on the HTML
var counter = 0; //start counter
var elem = document.getElementById("changeText");//the place where we change things
setInterval(change, 4000);//every 4 seconds run the following stuff:
function change() {
 var text = three_random_colors(3);//get what's inside "three_random_colors"
 elem.innerHTML = text[counter];//on div, add content <--- (I want 3 at once here! but I get only 1)
    counter++;
    if(counter >= text.length) { counter = 0; var text = three_random_colors(3); }//reset
}
How to&Answer:

Your problem is that your change function only outputs one colour at a time. You can simplify it to just output (for example)

text.join(' ')

and you will see all three colours:

//set colors
var colors = ["white", "red", "blue", "yellow", "orange", "brown", "black", "violet", "purple", "pink", "green"];

//pick 3 of them randomly
var three_random_colors = (n) => {
  return colors.reduce((memo, val, index) => {
    var p = (n - memo.length); // How many remaining to choose.
    var q = colors.length - index; // How many remaining to choose from.
    if (Math.random() < p / q) {
      memo.push(val);
    }
    return memo;
  }, []);
};

//output the colors on the HTML
var elem = document.getElementById("changeText"); //the place where we change things
setInterval(change, 4000); //every 4 seconds run the following stuff:
function change() {
  var text = three_random_colors(3); //get what's inside "three_random_colors"
  elem.innerHTML = text.join(' '); //on div, add content <--- (I want 3 at once here! but I get only 1)
}
<div id="changeText"></div>

Answer:

You can do this pretty simply with randojs.com, and this code will execute immediately for the first run- then every four seconds thereafter, and it will never repeat the same color more than once within the same three-color set. All I do is make a shuffled color array using randojs‘s randoSequence function, slice the first three values from that array, map them to their raw values with .value (because randojs actually returns an array of objects in case you need to access the value’s original index with .index), join those values together into a string, and stick them into #color‘s innerHTML.

function showRandomColors() {
  var colors = ["white", "red", "blue", "yellow", "orange", "brown", "black", "violet", "purple", "pink", "green"];
  document.querySelector("#colors").innerHTML = randoSequence(colors).slice(0, 3).map(i => i.value).join(" ");
}

showRandomColors();
setInterval(showRandomColors, 4000);
<script src="https://randojs.com/1.0.0.js"></script>
<div id="colors"></div>

Like I said, this code uses randojs.com, so if you want to use this code, make sure you have this in the head tag of your html document:

<script src="https://randojs.com/1.0.0.js"></script>