CODEWITHSUNDEEP
javascripthtml
Krisna
Krisna

Reputation: 3423

Javascript foreach background color change

I am practicing javascript. I have created one button. I have arrays of color. when the button will be click my background color will be change. I used forEach method for looping the arrays of color. When click the button it changes the background color once then it does not change anymore. I don't know what I am making mistake.

Here is my code:

const changeColorBtn = document.getElementById('btn');

changeColorBtn.addEventListener('click', function () {

  const colorArray = ['#6666FF', '#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
    '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
    '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
    '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
    '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
    '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
    '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
    '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
    '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
    '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6'];

  colorArray.forEach((i, index) => {
    document.body.style.background = colorArray[index % i.length]
  })

})
<button id="btn">click</button>

Upvotes: 0

Views: 652

Answers (3)

Nitheesh
Nitheesh

Reputation: 19986

There is no need to use a for each loop. Just use a global index variable. Each time on click set the backgrond color based on that and update that global index.

What I have done is inside the click function will take clickIndex % colorArray.length this will make the localIndex variable to rotate from 0 to the length of color array.

var clickIndex = 0;
const changeColorBtn = document.getElementById('btn');
const colorArray = ['#6666FF', '#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
  '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
  '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
  '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
  '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
  '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
  '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
  '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
  '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
  '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6'];

changeColorBtn.addEventListener('click', function () {
    const localIndex = clickIndex % colorArray.length;
    console.log(localIndex);
    document.body.style.background = colorArray[localIndex]
    clickIndex++;
})
<button id="btn">click</button>

Upvotes: 0

Always Helping
Always Helping

Reputation: 14570

You can simply and the easiest way is to use Math.floor and Math.random to get different color each time you click on a button.

Live Working Demo:

const changeColorBtn = document.getElementById('btn');

changeColorBtn.addEventListener('click', function() {

  const colorArray = ['#6666FF', '#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
    '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
    '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
    '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
    '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
    '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
    '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
    '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
    '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
    '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6'
  ];

  colorArray.forEach((i, index) => {
    document.body.style.background = colorArray[Math.floor(colorArray.length * Math.random())];
  })
})
<button id="btn">click</button>

Upvotes: 2

hgb123
hgb123

Reputation: 14891

You might want this

const changeColorBtn = document.getElementById('btn');

let index = 0

const colorArray = ['#6666FF', '#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
  '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
  '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
  '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
  '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
  '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
  '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
  '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
  '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
  '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6'
];

changeColorBtn.addEventListener('click', function() {
  document.body.style.background = colorArray[index++ % colorArray.length]
})
<button id="btn">click</button>

Upvotes: 2

Related Questions