JS比较innerHTML

Question

为课堂工作。我试图将两个<li>元素传递到下面的函数中，一次一个。然后，我正在尝试比较innerHTML，这是一个<i>元素。如果匹配，我调用一个函数。如果没有，我打电话给另一个。

但是，当我运行它时，它不起作用。我将console.log s放在代码中作为测试，它们永远不会触发。知道发生了什么事吗？

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

function display(card) {
    card.className += " open show";
}

let pick1, pick2;

function addCards(openCard){

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

我确实看到了一些关于这个主题的相关问题，但他们都使用了jquery，我不知道。

Answer 1

let pick1 = openCard;

您在函数内重新声明了pick1 。

这将创建一个新变量，用于屏蔽同名的全局变量。

每次运行该功能时，您都会获得一个新的pick1和一个新的pick2，两者都是undefined。

因此，您总是会遇到if/else的前半部分。

从函数内的这两个变量中删除let声明。

我厌倦了OP发表评论说这不会起作用而不是真正尝试。

＆＃13;

＆＃13;

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");
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;