Question

I have been working with the answer provided here:
Apply a random class to every element specified

However, I would like it to select from the classes listed then apply the randomly selected class to three items.

$(document).ready(function() {
    var classes = ["c4kdarkerBlue", "c4korange", "c4kyellow", "c4kyellow", "c4kpink", "c4kpurple", "c4kgreen", "c4kred"];

    $(".instructorDetails h3, .instructorDetails h4, .instructorDetails h5").each(function(){
        $(this).addClass(classes[Math.floor(Math.random()*classes.length)]);
    });
});

The above code chooses a random class, but applies a different one to each item instead of the same class to all three.

I need the h3, h4, and h5 to all have the same colour – randomly selected.

Thanks for your help.

Answer 1

If you create the random number inside .each it will generate a new one for each element. You should do it like;

$(document).ready(function() {
    var classes = ["c4kdarkerBlue", "c4korange", "c4kyellow", "c4kyellow", "c4kpink", "c4kpurple", "c4kgreen", "c4kred"],
        randNum = Math.floor(Math.random()*classes.length);

    $(".instructorDetails h3, .instructorDetails h4, .instructorDetails h5").each(function(){
        $(this).addClass(classes[randNum]);
    });
});