CODEWITHSUNDEEP
javascripthtmlcss
user6439507
user6439507

Reputation:

Randomizing font colors in divs

I am trying to make it so that when my page is loaded the font color in my menu divs are changed to a random color from my array. Here is my code: 

var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];

var letterColors = [red, orange, green, blue, purple];

var textToColour = document.getElementsByClassName("menuItem");

function changeColour() {
  for (let i = 0; i < textToColour.length; i++) {
    textToColour[i].style.color = letterColors[Math.floor(Math.random() * letterColors.length)];
    console.log("Check");
  }
}

window.addEventListener('load', changeColour);
<div class='menuItem'>
  item1
</div>

<div class='menuItem'>
  item2
</div>

<div class='menuItem'>
  item3
</div>

Does anyone see where I am going wrong?

Upvotes: 2

Views: 78

Answers (6)

Aymen
Aymen

Reputation: 1496

use document.body.addEventListener('DOMContentLoaded', namefunc()); waiting for the DOMContentLoaded it's the best practice to speed up the page

var arrColor= ['red','blue','green','yellow','purple'];
var el = document.getElementsByClassName("item");

function randColor() {
  for(let i = 0; i < el.length; i++) {
    el[i].style.color = arrColor[Math.floor(Math.random() * arrColor.length)];
  }
}

   document.body.addEventListener('DOMContentLoaded', randColor());
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>

Upvotes: 0

Pallavi Dwivedi
Pallavi Dwivedi

Reputation: 196

Just added rgb before the color codes in your existing code snippet. This should work :)

var textToColour = document.getElementsByClassName("menuItem");
var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];

var letterColors = ['rgb('+red+')', 'rgb('+orange+')', 'rgb('+green+')', 'rgb('+blue+')', 'rgb('+purple+')'];

function changeColour() {
  for(let i = 0; i < textToColour.length; i++) {
    textToColour[i].style.color =  letterColors[Math.floor(Math.random() * letterColors.length)];
  }
}

window.addEventListener('load', changeColour);
<div class="menuItem">Item 1</div>
<div class="menuItem">Item 2</div>
<div class="menuItem">Item 3</div>
<div class="menuItem">Item 4</div>
<div class="menuItem">Item 5</div>
<div class="menuItem">Item 6</div>
<div class="menuItem">Item 7</div>
<div class="menuItem">Item 8</div>

Upvotes: 0

user6439507
user6439507

Reputation:

This is what I have changed it to and it works fine. I made the mistake of adding variables in for each color. I actually got those from another code snippet that I thought would work for this function.

Here is the Functioning code: 

var textColors = ["red", "orange", "green", "blue", "purple"];

var textToColour = document.getElementsByClassName("menuItem");

function changeColour() {
 for(let i = 0; i < textToColour.length; i++) {
  textToColour[i].style.color =  textColors[Math.floor(Math.random() *    letterColors.length)];
console.log("Check");
 }
}

window.addEventListener('load', changeColour);

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

You use rgb colors so use 'rgb('+...+')'

var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];

var letterColors = [red, orange, green, blue, purple];

    var textToColour = document.getElementsByClassName("menuItem");

function changeColour() {
  for(let i = 0; i < textToColour.length; i++) {
    textToColour[i].style.color = 'rgb('+ letterColors[Math.floor(Math.random() *      letterColors.length)]+')';
    
  }
}

window.addEventListener('load', changeColour);
<div class='menuItem'>
  try me
</div>

Upvotes: 0

Orelsanpls
Orelsanpls

Reputation: 23515

EDIT : The format of the colors are wrong, look at the following

var red = 'rgb(0, 100, 63)';
var orange = 'rgb(40, 100, 60)';
var green = 'rgb(75, 100, 40)';
var blue = 'rgb(196, 77, 55)';
var purple = 'rgb(280, 50, 60)';

var letterColors = [red, orange, green, blue, purple];

var textToColour = document.getElementsByClassName("menuItem");

function changeColour() {
  for (let i = 0; i < textToColour.length; i++) {
    textToColour[i].style.color = letterColors[Math.floor(Math.random() * letterColors.length)];
  }
}

window.addEventListener('load', changeColour);
<div class='menuItem'>
  Item 1
</div>

<div class='menuItem'>
  Item 2
</div>

<div class='menuItem'>
  Item 3
</div>

const textToColour = document.getElementsByClassName('menuItem');

const letterColors = [
  'red',
  'blue',
  'yellow',
  'orange',
];

function changeColour() {
  Array.from(textToColour).forEach((x) => {
    const randomIndex = Math.floor(Math.random() * letterColors.length);

    x.style.color = letterColors[randomIndex];
  });
}

window.addEventListener('load', changeColour);
<div class='menuItem'>
  Baguette
</div>

<div class='menuItem'>
  Petit pain
</div>

<div class='menuItem'>
  Croissant
</div>

Upvotes: 1

serhathss
serhathss

Reputation: 31

I think, your random value like htmlcolor format (#123456) but some color codes contain letters. May be you will create random letters and numbers.

Upvotes: 0

Related Questions