0

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!

4
  • 1
    y que de que no son iguales, esta malo? digo.. verificas que lo que se genere aleatoriamente sea igual al background color que tienes? puedes agregarlo a algun JSFiddle o Codepen para ver el funcionamiento?
    – sioesi
    Commented el 27 feb. 2018 a las 18:14
  • @sioesi La cosa es que minimo uno tiene que estar bien, en 2 minutos subo un codepen
    – Varox
    Commented el 27 feb. 2018 a las 18:18
  • 1
    gracias!, intentare ayudarte!
    – sioesi
    Commented el 27 feb. 2018 a las 18:19
  • @sioesi , ya lo puse! la cosa es eso, que minimo uno, tendría que ser correcto
    – Varox
    Commented el 27 feb. 2018 a las 18:22

2 respuestas 2

1

Bien amigo, viendo tu codepen me di cuenta que el error son los espacios en blanco.

Primero elimine todos los espacios generados aqui

squares[i].style.backgroundColor = "rgb("+ R +", "+ G +", "+ B +")";
squareColor.push("rgb("+ R +", "+ G +", "+ B +")");

Segundo elimine los del clickedColor

clickedColor = clickedColor.replace(/ /g,'');

Tercero elimine los del pickedColor

pickedColor = pickedColor.replace(/ /g,'');
2
  • Muchisimas gracias!!! vaya fallo mas tonto!
    – Varox
    Commented el 27 feb. 2018 a las 18:47
  • a todos nos pasa! jaaja @Varox suerte!
    – sioesi
    Commented el 27 feb. 2018 a las 18:47
1

El problema ocurre cuando le asignas el backgroundColor al elemento con formato rgb( r, g, b) este se corrije quedando rgb(r, g, b), remueve los espacios para que la comparacion sea verdadera.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.