How to make a cycle that change the background color every time I click on it?

user_13710843 0
Viewed 148

I'm trying to make a static page where, if I click in any part of it, this one changes its color. I create an object with the colors hex code but I don't know how to make the document.body.style.background work with it.

Also, I would like it if the program can follow that secuence and not just throw random colors. Sorry if I look to the noob, but I'm new to programming. I'm learning by myself

It works if I put it like this:

function changeBground() {
  var colors;
  document.body.style.background = "#FF0000";
}

But that is only one color, is not my objective

This is my full code:

document.addEventListener("click", changeBground); 
var colors = {
    red: "#FF0000",
    orange: "#FF7F00",
    yellow: "FFFF00",
    green: "#00FF00",
    aqua: "#00FFFF",
    blue: "#0000FF",
    purple: "#8B00FF",
};

function changeBground()
{
  document.body.style.background = colors;
}
object colors css html javascript
3 Answers

Get the colors keys with Object.keys() method and on each click increment the index if index got colors size then set index to 0. Please try this example

document.addEventListener("click", changeBground);
let index = 0;
const colors = {
  red: "#FF0000",
  orange: "#FF7F00",
  yellow: "FFFF00",
  green: "#00FF00",
  aqua: "#00FFFF",
  blue: "#0000FF",
  purple: "#8B00FF",
};

function changeBground() {
  const keys = Object.keys(colors);

  document.body.style.backgroundColor = colors[keys[index]];

  if (index < keys.length) {
    index += 1;
  } else {
    index = 0;
  }
}

Here an example

document.addEventListener("click", changeBground);
let index = 0;
const colors = {
  red: "#FF0000",
  orange: "#FF7F00",
  yellow: "FFFF00",
  green: "#00FF00",
  aqua: "#00FFFF",
  blue: "#0000FF",
  purple: "#8B00FF",
};

function changeBground() {
  const keys = Object.keys(colors);

  document.body.style.backgroundColor = colors[keys[index]];

  if (index < keys.length) {
    index += 1;
  } else {
    index = 0;
  }
}

user_6152740

You are assigning colors object to color that's why this is not working - use belo code this will work.

document.addEventListener("click", changeBground); 
var counter = 0;
var colors = ['red', 'orange', 'yellow', 'green', 'aqua', 'blue', 'purple'];

function changeBground() {
  document.body.style.background = colors[counter];
  counter = counter < colors.length -1 ? counter + 1 : 0;
}

if you want to randomly update any color from the array use below function instead upper one - 

function changeBground() {
  var color = colors[Math.floor(Math.random() * colors.length)];
  document.body.style.background = color;
}
user_79504250

You can use Math.random(), generate a random number that allow you to get random background color from your object combined with Object.keys(), here is a working snippet:

document.addEventListener("click", changeBground); 
var colors = {
    red: "#FF0000",
    orange: "#FF7F00",
    yellow: "#FFFF00",
    green: "#00FF00",
    aqua: "#00FFFF",
    blue: "#0000FF",
    purple: "#8B00FF",
};

const colorKeys = Object.keys(colors);

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}

function changeBground() {
  const randKey = getRandomInt(0, colorKeys.length);
  console.log(randKey, colorKeys[randKey] );
  const color = colors[colorKeys[randKey]];
  document.body.style.backgroundColor = color;
  
}

user_8963580
Related