При клике по 3м блокам появляется 4й

Question

Подскажите как сделать чтоб после клика на три блока появлялся четвертый

<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>

Answer 1

Можешь использовать JQuery(тут про селекторы), с ним проще

$('.aparent:first').children('div').click(()=>{
    $('.aparent:first').children('div:nth-child(4)').show();
});

.aparent > div{
    border: 1px solid black;
    width: 25px;
    height: 25px;
    display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="aparent">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div style="display:none">4</div>
</div>

Answer 2

Чтобы после клика на три блока появлялся четвертый

let wrap = document.getElementById('wrap');

wrap.addEventListener('click', function _tmp(e) {
  let block = e.target.closest('.block');
  if( !block ) return; // return прервет функцию, если кликнули не на нужный блок.
  
  block.classList.add('clicked');
  
  if( document.querySelectorAll('.block.clicked').length === 3 ) {
    // .block.clicked без пробела: Все элементы, у которых есть оба класса
    document.getElementById('hidden').style.display = "block";
    wrap.removeEventListener('click', _tmp);
    // После завершения, обработчик клика удаляется.
  }
});

#wrap { display: flex; }

.block {
  width: 50px;
  height: 50px;
  border: 1px solid orange;
  margin: 2px;
  cursor: pointer;
}

.block.clicked {
  background-color: orange;
}

#hidden { display: none; }

<div id="wrap">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block" id="hidden">4</div>
</div>

P.s. можно и на CSS ))

CSS - селекторы

input[type="radio"] { display: none; }

#rad_1:checked + #rad_2:checked + #rad_3:checked ~ .block.hidden {
  display: block;
}

#rad_1:checked ~ label[for="rad_1"],
#rad_2:checked ~ label[for="rad_2"],
#rad_3:checked ~ label[for="rad_3"] {
  background-color: orange;
}

/***/

#wrap { display: flex; }

.block {
  width: 50px;
  height: 50px;
  border: 1px solid orange;
  margin: 2px;
  cursor: pointer;
}

.block.hidden { display: none; }

<div id="wrap">
  <input type="radio" id="rad_1">
  <input type="radio" id="rad_2">
  <input type="radio" id="rad_3">
  
  <label class="block" for="rad_1">1</label>
  <label class="block" for="rad_2">2</label>
  <label class="block" for="rad_3">3</label>
  <label class="block hidden">4</label>
</div>

БЛОГ НА HUSL

При клике по 3м блокам появляется 4й

Ответы (2 шт):