Как выполнить блок кода при изменении видимости блока?

Question

[bimka]

При нажатии пользователем адреса на карте, блок кода adress_box становится видимым.

<div id="adress_box" style="visibility: hidden">Ищем доставку по адресу <span id="address_confirm"></span></div>

Как сделать чтобы код, расположенный ниже, выполнялся при изменении видимости на visible?
alert('div is display!!!');

пока добился только того, чтобы при загрузке станицы выполнялся подобный код:

<div id="adress_box" style="visibility: hidden">Ищем доставку по адресу <span id="address_confirm"></span></div>

<script>
let element = document.getElementById('address_confirm');
let cssObj = window.getComputedStyle(element);
if (cssObj.getPropertyValue("visibility") == 'visible') {
    alert('div is NOT display!!!');
}
</script>

Answer 1

[bimka]

При нажатии на карту изменяется не только видимость блока, но и его содержимое.
Оказалось, что гораздо проще слушать изменение содержимого блока.

<div id="adress_box" style="visibility: hidden">Ищем доставку по адресу <span id="address_confirm"></span></div>

<script>
document.getElementById("address_confirm").addEventListener("DOMSubtreeModified", function() {
  alert('div is display!!!');
});
</script>

Answer 2

[Rst0]

Самый простой вариант

function checkDiv(element){
    let cssObj = window.getComputedStyle(element);
    if (cssObj.getPropertyValue("visibility") == 'visible') {
          alert('div is NOT display!!!');
    }
}
  let element = document.getElementById('address_confirm');
  setInterval(() => checkDiv(element), 1000);

Comments

[bimka]

Спасибо за ответ. Теперь при visibility: visible всплывающее окно всплывает каждую секунду. Как сделать, чтобы окно вызывалось только один раз?

[Rst0]

вместо alert вставить свои действия - то ,что должно произойти если "visibility" == 'visible'

function checkDiv(element){
    let cssObj = window.getComputedStyle(element);
    if (cssObj.getPropertyValue("visibility") == 'visible') {
          console.log('div is NOT display!!!'); // к примеру, вывод в консоль.
    }
}
  let element = document.getElementById('address_confirm');
  setInterval(() => checkDiv(element), 1000);