Question

Okay, so this is my problem. I’m kind of new to javascript so plz bear with me. I haven’t found this issue somewhere else, and actually I think it’s my logic that doesn’t corespond to my willingness 😉

I’m setting up a memory game with php and javascript. My problem is that when I first execute the clickCard-function it sets the variable firstClick to True with it’s innerHTML-value and executes secondClick etc so long so fine, but if the guess is wrong only secondClick turns red. This because I believe that the first argument is static (and therfore saves the value of the color for firstClick), and I can’t come up with a solution on how to solve this. I’ve tried diffrent things like creating conditions like if else(firstClick != 0 && firstClick != secondClick) {code} etc.

Anyone that can help me?

This is my code:

var firstClick = new Boolean();
firstClick.toString();

var secondClick = new Boolean();
secondClick.toString();
function clickCard(elem){               

    if(firstClick == 0){
        firstClick = document.getElementById(elem.id).innerHTML;
                    elem.style.backgroundColor = "green";   
        //alert(firstClick);
        }

    else{

        secondClick = document.getElementById(elem.id).innerHTML;
        //alert(secondClick);
        elem.style.backgroundColor = "green";


            if(firstClick == secondClick){
                alert(firstClick +" equals "+ secondClick);
                firstClick = new Boolean();
                secondClick = new Boolean();
            }

            else {
                alert(firstClick + " equals not " + secondClick);
                firstClick = new Boolean();
                secondClick = new Boolean();
                document.getElementById(elem.id).style.backgroundColor="red";
            }   
    }
}

Answer 1

You have several problems in your code. Take a look at my changes and try to understand them, and it should work:

1. initialize booleans with var bool = true/false;
2. don’t mix the boolean with dom-elements
3. save your tiles in separate variables
4. actually set the color of the first tile to “red”

code:

var firstClick = true;
var piece1;
var piece2;

function clickCard(elem){               

    if(firstClick){
        piece1 = document.getElementById(elem.id);
        piece1.style.backgroundColor = "green";
        firstClick = false;  
    } else {

        piece2 = document.getElementById(elem.id);
        piece2.style.backgroundColor = "green";

        if(piece1.innerHTML == piece2.innerHTML){
            alert(firstClick +" equals "+ secondClick);
        } else {
            alert(firstClick + " equals not " + secondClick);
            piece1.style.backgroundColor="red";
            piece2.style.backgroundColor="red";
        }   
        firstClick = true;
    }
}

Now the advanced practice would be to put this into a closure to protect your “internal” values firstClick and piece1/2, but that’s another story;)