[Solved] JS comparing innerHTML

Question

let pick1 = openCard;

You redeclare pick1 inside the function.

This creates a new variable that masks the global variable of the same name.

Each time you run the function, you get a new pick1 and a new pick2, both of which are undefined.

Consequently, you’ll always hit the first half of the if/else.

Remove the let declarations from those two variables inside the function.

I’m fed up with the OP making comments that this won’t work instead of actually trying it.

gameDeck.addEventListener("click", function(e) {
   e.preventDefault();
   const pick = e.target;
   addCards(pick)
})


let pick1, pick2;

function addCards(openCard){

  if (!pick1) {
    pick1 = openCard;
  } else if (!pick2) {
    pick2 = openCard
    console.log(pick1)
    console.log(pick2)
    if (pick1.innerHTML == pick2.innerHTML) {
        match();
    } else {
        reset();
    }
  }
}

function match() {
    alert("They match");
}

function reset() {
    alert("They don't match");
}

<div id="gameDeck">
<button>One</button>
<button>Two</button>
<button>Three</button>
</div>

Accepted Answer

let pick1 = openCard;