我有3个Div，如何通过单击（一个接一个）选择2个Div，并在Javascript中显示第三个Div

我的html中有3个div（类），我想用“addEventListener click”在单击两个div时隐藏第三个div。然后我有两个剪辑的div，在某种程度上是“打开”的可见性模式，还有一个没有单击“关闭”的可见性模式

我的实际html结构代码：

<div class="card" id="card01">

</div>


<div class="card" id="card02">

</div>


<div class="card" id="card03">

</div>

还有我的JS：

let pokemons = document.getElementsByClassName("card");
//console.log(pokemons.length);

    for(let i = 0 ; i < (pokemons.length) ; i++){

        pokemons[i].addEventListener('click',function(){



        });

    }

let pokemons=document.getElementsByClassName（“卡片”）；
//console.log（pokemons.length）；
for（设i=0；i<（pokemons.length）；i++）{
口袋妖怪[i].addEventListener（'click'，函数（）{
});
}

您可以通过向单击的每个div添加一个“clicked”类，然后检查是否已单击了2个div来实现这一点。然后，您可以通过选择没有“clicked”类的div来隐藏尚未单击的div

let pokemons=document.getElementsByClassName（“卡片”）；
for（设i=0；i<（pokemons.length）；i++）{
口袋妖怪[i].addEventListener（“点击”），函数（事件）{
event.target.classList.add（“单击”）；
let clicked=document.getElementsByClassName（“clicked”）；
如果（单击。长度===2）{
document.querySelector（“.card:not（.clicked）”）.hidden=true；
}
});
}

.card{
背景颜色：金色；
高度：10公分；
宽度：7em；
边缘：1米；
浮动：左；
填充：1em；
}
.卡片：：之后{
内容：attr（id）；
}

您好非常感谢您的帮助，我在我的codepen沙盒上尝试了此代码，然后它工作正常，除了添加第四张卡（表示第四个div）时，它只隐藏了一张卡，而不是预期的两张卡。有什么想法吗？谢谢：）@Yirzaraji，你的代码笔示例对我来说效果很好。藏着两张牌。

pokemons[i].addEventListener("click", function(event) {
  event.target.classList.add("clicked");
  let clicked = document.getElementsByClassName("clicked");
  if (clicked.length === 2) {
    document.querySelector(".card:not(.clicked)").hidden = true;
  }
});