У меня есть 3 Div, как выбрать 2 Div одним щелчком мыши (и по одному) и не отображать ни один (или другой) третий в Javascript

Question

у меня есть 3 div (class) в моем html, и я хочу с помощью «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(){



        });

    }

Answer 1

Этого можно добиться, добавив класс «clicked» к каждому элементу div, по которому щелкают, и затем проверяя, были ли нажаты 2 элемента div. Затем вы можете скрыть div, на который еще не нажали, выбрав div, у которых нет класса "clicked".

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

let pokemons = document.getElementsByClassName("card");
for (let i = 0; i < (pokemons.length); i++) {
  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;
    }
  });
}

.card {
  background-color: gold;
  height: 10em;
  width: 7em;
  margin: 1em;
  float: left;
  padding: 1em;
}

.card::after {
  content: attr(id);
}

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

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

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