-1

Aim: I am trying to make a candy crush game with buttons as candies. So it is needed that the buttons have random colors (among 4 - red/ green/ blue / yellow).

What I tried: I created 4 classes of colors in css - 

      .pink{
               background-color: red;
      }
      .blue{
               background-color: blue;
      }
      .green{
               background-color: green;
      }
      .brown{
               background-color: yellow;
      }

And tried to assign these classes to the buttons randomly. But I am new to jQuery. I searched on the web and I tried the following script: 

        var colors = Array ('red','blue','green','yellow');

        var candy  = document.querySelectorAll("button");

        for(var i=0;i<colors.length;i++){

            candy[i].style.background-color=colors[i];
        }

It is not working. What can I try to resolve it?

halfer
  • 19,824
  • 17
  • 99
  • 186
elL
  • 19
  • 9
  • 3
    Does this answer your question? [Getting a random value from a JavaScript array](https://stackoverflow.com/questions/4550505/getting-a-random-value-from-a-javascript-array) – theusaf May 25 '20 at 04:53
  • yes @theusaf it helped. thanx a lot guys. – elL May 25 '20 at 12:32

3 Answers3

0

To get random number use Math.random(), but why it is not setting background color using for loop because you need to use camelCase while setting CSS attribute using javascript.

for(var i=0;i<colors.length;i++){

    candy[i].style.backgroundColor=colors[i];
}
Vaibhav
  • 1,412
  • 1
  • 10
  • 14
0

You can get a random item from the list using this code:

const randomColor = colors[Math.floor(Math.random() * colors.length)];

You can use your css by setting candy[i].className = randomColor;

You can also directly set the styles using candy[i].style.backgroundColor = randomColor

Example snippet: 

const colors = ["pink","green","blue","brown"];
const candy  = document.querySelectorAll("button");
for(var i=0;i<candy.length;i++){
  const randomColor = colors[Math.floor(Math.random() * colors.length)];
  candy[i].className = randomColor;
}
.pink{
  background-color: red;
}
.blue{
  background-color: blue;
}
.green{
  background-color: green;
}
.brown{
  background-color: yellow;
}
<button>hello</button>
<button>hello</button>
<button>hello</button>
<button>hello</button>
<button>hello</button>
theusaf
  • 1,781
  • 1
  • 9
  • 19
  • it worked. thank u for the swift response from the bottom of my heart. Now the problem is how to detect 3 or more candies (buttons) of same color/class in adjacent. How should I do it ? Any idea ? – elL May 25 '20 at 08:42
0

hope all is well! this works for me:

function random_bg_color() {
var x = Math.floor(Math.random() * 256);
var y = Math.floor(Math.random() * 256);
var z = Math.floor(Math.random() * 256);
var bgColor = "rgb(" + x + "," + y + "," + z + ")";

console.log(bgColor);

document.body.style.background = bgColor;
}

random_bg_color();

This will work if you are using Javascript. good luck!

Ori Naftaly
  • 1