javascript - 如何确保在javascript中仅选择2个div

我已经做了很多搜索，似乎找不到我想要的东西，所以很遗憾，这并不是超级重复。我正在用香草javascript做一个非常简单的内存游戏（试图远离jquery，这样我就可以掌握JS的基础知识了）

这是小提琴的链接，因此您可以看到整个作品以及我认为给我带来麻烦的功能：https://jsfiddle.net/69kfgxbn/

var showTile = function() {
var tile = document.getElementsByClassName('tile');
var tilesChosen = 0;
console.log(this.style.backgroundColor);
console.log(this);

if (tilesChosen < 2) {
    this.classList.remove('card-back');
    tilesChosen = tilesChosen + 1;
    console.log('under 2');
    console.log(tilesChosen);
}
else if (tilesChosen == 2) {
    tile.removeEventListener('click', function() {
        console.log('hit the max');
    })
}

};

我的问题是我可以单击一个图块，删除了卡片背面的类以显示颜色，但是我不知道如何将其限制为仅两个图块。

我当前的思路是这样的：

tileChosen设置为零
if语句检查TilesChosen是否如果是这样，将tile选择增加1
否则，如果tileChosen == 2，则删除所有类的事件处理程序，我认为这将阻止任何人翻转超过2个tile。

但到目前为止，无论您单击多少个图块，我什至都没有进入elseIf。同样，tilesChosen不会增加超过1，因此就像我陷入了语句的if部分一样。我还将if / else放在for和while循环中，以强制其循环并测试tileChosen的值，但它是同一回事。

大家的任何建议将不胜感激！

最佳答案

var jsBoard = [];
  var gamePieces = 12;
  var tileChosen = 0;


每次单击时，都将变量tileChosen重新启动为0，因此它永远不会达到所需的值。您应该声明为全局图块

像这样

var jsBoard = [];

var gamePieces = 12;
var tileChosen = 0;

现在您无法点击更多div