Html Question posted in
Some basic documentation can be found here.

Html – Make every <li> element different (no repeat) color from randomly generated list of colors

I have an array of colors and then I randomized them. I want to assign different color to each list item instead of having items with the same colors or having repeated colors.

const myList = document.querySelector('.myList');
const listItems = myList.querySelectorAll('li');
const itemColors = ['red', 'green', 'royalblue', 'purple','cornflowerblue', 'sienna','palevioletred','orange'];

listItems.forEach((item, index) => {
  

  let randomColors = itemColors[Math.floor(Math.random() * itemColors.length)];
   item.style.color = randomColors;
  
});
<ul class="myList">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Soup</li>
  <li>Juice</li>
  <li>Beer</li>
  <li>Wine</li>
  <li>Soda</li>
</ul>
Tags:

2

Answers


  1. 0

    One idea is just clone your itemColors and then randomly sort.

    You can then use the index into this array to get the color.

    Note: The random sort here is not 100% random as technically it’s not using sort in the correct way, but for something like this should be fine. Also this also assumes your array of colors is larger than the number of li elements.

    eg..

    const myList = document.querySelector('.myList');
const listItems = myList.querySelectorAll('li');
const itemColors = ['red', 'green', 'royalblue', 'purple','cornflowerblue', 'sienna','palevioletred','orange'];

const randColors = [...itemColors].sort(() => Math.random() - 0.5);

listItems.forEach((item, index) => {
   item.style.color = randColors[index];
});
    <ul class="myList">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Soup</li>
  <li>Juice</li>
  <li>Beer</li>
  <li>Wine</li>
  <li>Soda</li>
</ul>
    Login or Signup to reply.
  2. 0

    You can also make a Function that give you the unique index and hence you can assign the different color to each variable.
    It’s just a method approach. If you are interested.

    const myList = document.querySelector('.myList');
const listItems = myList.querySelectorAll('li');
const itemColors = ['red', 'green', 'royalblue', 'purple','cornflowerblue', 'sienna','palevioletred','orange'];
console.log("This list",listItems.length)
console.log("This item",itemColors.length)
let previousIndexes = []
function ReturnUniqueIndex(lengthss){
  
    let randomNum;
    let min = 0;
    let max = lengthss;
    
  
    do {
        randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
    } while (previousIndexes.includes(randomNum));

    return randomNum;
  
  
}
listItems.forEach((item, index) => {
  
  previousIndexes = [...previousIndexes,index]
  let randomColors = itemColors[ReturnUniqueIndex(itemColors.length)];
   item.style.color = randomColors;
  

});

    The HTML:

    <ul class="myList">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Soup</li>
  <li>Juice</li>
  <li>Beer</li>
  <li>Wine</li>
  <li>Soda</li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search