Как при включении трех элементов автоматически появлялась картинка?

Question

Подскажите как сделать что бы при включении трех элементов автоматически появлялась картинка.(<div class="glaz"></div>)

<div class="ogon1">
  <input type="image" src="images/fakel.gif" value="Total" onclick="TotalLength()" />
  <div class="stretchRight">
    <div class="element">
      <hr class="hr-vertical-gradient">
      <audio id="player" autoplay="autoplay"></audio>
    </div>
  </div>
</div>

<!-- Второй факел -->

<div class="ogon2">
  <input type="image" src="images/fakel2.gif" value="Total" onclick="TotalLength1()" />
  <div class="stretchLeft">
    <div class="elements">
      <audio id="play" autoplay="autoplay"></audio>
      <hr class="hr-inclined-left">
    </div>
  </div>
</div>
<!-- Третий факел -->
<div class="ogon3">
  <input type="image" src="images/fakel3.gif" value="Total" onclick="TotalLength2()" />
  <div class="elementslar">
    <div class="stretchLeft">
      <audio id="plays" autoplay="autoplay"></audio>
      <hr class="hr-inclined-right">
    </div>
  </div>
</div>
<!-- Глаз -->
<div class="glaz"></div>

Answer 1

Если речь идет о "включении" всех трех аудио - то у тега есть событие 'play' (при вставке в дом - 'onplay', соответственно). Можно каждому аудио выдать в качестве обработчика этого события функцию, которая будет проверять, воспроизводится ли каждый из трех треков, и, если такое условие истинно, будет выдавать элементу либо свойство display: block !important в css (при условии, что класс 'glaz' включал в display: none), либо какой-нибудь специальный класс 'glaz__vis', который бы красиво отображал элемент. Пример простейшего первого варианта:
if (!document.getElementById('player').paused && !document.getElementById('play').paused && !document.getElementById('plays').paused) document.getElementsByClassName('glaz')[0].style.setProperty('display', 'block !important')
Вот такую короткую функцию - в onplay каждому из трех треков. Чтобы элемент пропадал при выключении какого-то из трех аудио, можно еще прикрутить else с обратным кодом:
if (!document.getElementById('player').paused && !document.getElementById('play').paused && !document.getElementById('plays').paused) document.getElementsByClassName('glaz')[0].style.setProperty('display', 'block !important'); else document.getElementsByClassName('glaz')[0].style.removeProperty('display')

БЛОГ НА HUSL

Как при включении трех элементов автоматически появлялась картинка?

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