How to call a function when the block visibility changes?-CodePudding

When the user clicks on the map, the address_box code block becomes visible.

<div id="adress_box" style="visibility: hidden">We are looking for delivery to <span id="address_confirm"></span></div>

How do I make the code below run when the visibility changes to visible?

alert('div is  display!!!');

so far, I have only achieved that when the page loads, a similar code is executed:

<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 display!!!');
}
</script>

CodePudding user response：

You try using MutationObserver. Here is an example

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        div {
            height: 10px;
            background: red;
        }
    </style>
</head>

<body>

    <div></div>
    <div></div>
    <div ></div>
    <div></div>
    <div></div>
    <div ></div>
    <div ></div>
    <div></div>

    <script type="text/javascript">
        var elements = document.querySelectorAll('.test');
        //instead of timeout you can add event listener to change display value
        let count = 0;
        var intr = setInterval(function () {
            count  ;
            elements[0].style.color = 'red';
            elements[0].style.display = count % 2 == 0 ? 'block' : 'inline-block';
            if (count >= 2)
                clearInterval(intr);
        }, 2000)

        elements.forEach(element => {
            observer.observe(element, {
                attributes: true //will observe attribute change only, for childlist and subtree, you can add additional configuration
            });
        })

        var observer = new MutationObserver(function (mutations) {
            //mutations is the list of elements that got mutated
            mutations.forEach(mutation => {
                if (mutation.type === 'attributes' && mutation.attributeName === 'style' && Object.values(mutation.target.style).indexOf('display') > -1) {
                    //log mutation for better understanding
                    mutation.target.style.background = 'green'; // with target you can get mutated element
                    mutation.target.innerHTML = `Now I'm ${mutation.target.style.display}`; // can get mutated elements display value
                }

            })
        });
    </script>
</body>

</html>

Observer added to whatever elements you want to observe. Once any of them get mutated, in observer callback function we can check kind of change its target and their value.

CodePudding user response：

When we click on the map, with changing visibility changed div's text.
Much easier listen text changing in the div.

<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>