0

Составил схему по которой должны включиться и отключиться элементы но отключаются лишь кнопки. Не могу понять в чем дело помогите разобраться. При нажатии 1кнопки должно появиться два блока. При нажатии на вторую кнопку должно появиться еще два блока. Когда включены все четыре блока должен появиться пятый блок а остальные четыре отключиться.

function TotalLength1() {
  this.textContent = this.textContent === 'off' ? 'on' : 'off';
  var elements = _all('.block1, .block2');
  toggle(elements);

  function toggle(elems) {
    for (var i = 0; i < elems.length; i++) {
      elems[i].style.display = isVisible(elems[i]) ? "none" : "block";
    }
  }

  function isVisible(el) {
    return getComputedStyle(el).display !== 'none';
  }

  function _all(str) {
    return document.querySelectorAll(str);
  }
}

function TotalLength2() {
  this.textContent = this.textContent === 'off' ? 'on' : 'off';
  var elements = _all('.block3, .block4');
  toggle(elements);

  function toggle(elems) {
    for (var i = 0; i < elems.length; i++) {
      elems[i].style.display = isVisible(elems[i]) ? "none" : "block";
    }
  }

  function isVisible(el) {
    return getComputedStyle(el).display !== 'none';
  }

  function _all(str) {
    return document.querySelectorAll(str);
  }
}
document.addEventListener('click', function _tmp(e) {
  let block = e.target.closest('.block');
  if (!block) return; // return прервет функцию, если кликнули не на нужный блок.

  block.classList.toggle('clicked');

  if (document.querySelectorAll('.block.clicked').length == 2) {
    // .block.clicked без пробела: Все элементы, у которых есть оба класса
    document.getElementById('hidden').style.display = "block";
    // После завершения, обработчик клика удаляется.


    var line = document.querySelector('.key');

  } else document.getElementById('hidden').style.display = "none";
});
.button1 {
  text-align: center;
  padding: 8px 10px;
  border: solid 1px #777777;
  color: #7777777;
  background: #ffffff;
  tansition: all .3s linear;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  text-transform: uppercase;
}

.button2 {
  text-align: center;
  padding: 8px 10px;
  border: solid 1px #777777;
  color: #7777777;
  background: #ffffff;
  tansition: all .3s linear;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  text-transform: uppercase;
}

.block1 {
  text-align: center;
  padding: 8px 10px;
  border: solid 1px #777777;
  color: #777777;
  background: #ffffff;
  transition: all .3s linear;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  text-transform: uppercase;
  display: none;
}

.block2 {
  text-align: center;
  padding: 8px 10px;
  border: solid 1px #777777;
  color: #777777;
  background: #ffffff;
  transition: all .3s linear;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  text-transform: uppercase;
  display: none;
}

.block3 {
  text-align: center;
  padding: 8px 10px;
  border: solid 1px #777777;
  color: #777777;
  background: #ffffff;
  transition: all .3s linear;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  text-transform: uppercase;
  display: none;
}

.block4 {
  text-align: center;
  padding: 8px 10px;
  border: solid 1px #777777;
  color: #777777;
  background: #ffffff;
  transition: all .3s linear;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  text-transform: uppercase;
  display: none;
}

.block5 {
  text-align: center;
  padding: 8px 10px;
  border: solid 1px #777777;
  color: #777777;
  background: #ffffff;
  transition: all .3s linear;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  text-transform: uppercase;
  display: none;
  box-shadow: 0 0 5px 5px #fe2c2c, 0 0 5px 5px #ffec69, 0 0 5px 5px #ff7a0e;
  background: linear-gradient(180deg, #292827, #292827);
  animation-name: block5;
  animation-timing-function: linear;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes block5 {
  50% {
    opacity: 0;
  }
}
<div class="block">
  <input type="button" class="button1" value="Кнопка" onclick="TotalLength1()" />
</div>

<div class="block">
  <input type="button" class="button2" value="Кнопка" onclick="TotalLength2()" />
</div>
<div class="block">
  <input type="button" class="block1" value="блок1" />
</div>
<div class="block">
  <input type="button" class="block2" value="блок2" />
</div>
<div class="block">
  <input type="button" class="block3" value="блок3" />
</div>
<div class="block">
  <input type="button" class="block4" value="блок4" />
</div>
<button class="block5" id="hidden">блок5</button>

1 ответ 1

1
... onclick="TotalLength1.call(this)"

... onclick="TotalLength2.call(this)"
1
  • Куда это прописать ? 21 дек 2020 в 20:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.