Tengo un problema, al comparar dos strings "clickedColor" y "pickedColor" siempre me aparece el fallo de que no son iguales y no consigo ver el porque. Agradezco toda la ayuda posible.
Aqui el codepen: Codepen
ColorRandomizer genera tres valores aleatorios R G y B y los va metiendo a un Array de cuadrados (squares), luego el color asignado lo mete a un Array de Strings (squareColor).
pickedColor coge un valor aleatorio dentro del Array de squareColor y se asigna
CreateClickEvents es donde me da que siempre es falso, tras crear los eventos de click. En estos, si el background es igual a pickedColor deberia salir correcto, si no, error. La cosa es que SIEMPRE ME SALE ERROR
Aqui pego el codigo del archivo js
var squares = document.querySelectorAll(".square");
var squareColor = [];
var colorToGuess = document.querySelector("#colorToGuess");
//Color variables
var R = 0;
var G = 0;
var B = 0;
//console.log(pickedColor);
colorRandomizer();
var pickedColor = squareColor[Math.floor(Math.random() * 6)];
createClickEvents();
colorToGuess.textContent = pickedColor;
//Randomize boxes with colors and fill squareColor[]
function colorRandomizer () {
for (var i = 0; i <= squares.length - 1; i++) {
R = Math.floor(Math.random() * 256);
G = Math.floor(Math.random() * 256);
B = Math.floor(Math.random() * 256);
squares[i].style.backgroundColor = "rgb( " + R + ", " + G + ", " + B + ")";
squareColor.push("rgb( " + R + ", " + G + ", " + B + ")");
//console.log(squareColor[i]);
}
}
function createClickEvents () {
for (var i = 0; i <= squares.length - 1; i++) {
squares[i].addEventListener("click", function(){
var clickedColor = this.style.backgroundColor;
if(clickedColor === pickedColor){
alert("Correct!");
}else{
alert("Wrong!");
this.style.backgroundColor = "#232323";
}
})
}
}
Muchas gracias!