Почему скрипт выполняется с задержкой?

Question

Чтобы этот скрипт отработал нужно нажать на кнопку два раза, а после создания, одно из модальных окон не закрывается при нажатии на пустую область вокруг неё

<section class="subs-and-wall">
    <article class="user-subs">
        <a href="#" class="subs-of-mine" id="subs-of-mine" onclick="subsOfMine()">Подписчики</a>
        <div id="subs-of-mine-window" class="subs-window">
            <div class="model-content">
                <span class="close-of-mine">&times;</span>
                <p>Ваши подписчики</p>
            <div class="user-sub-blocks">
                <div class="user-sub-block">
                    <img src="img/user-img.png" alt="Friend-photo" width="50px">
                    <a href="#">Андрей Андреев</a>
                </div>
               

            </div>

            </div>
        </div>
        <a href="#" class="subs-of" id="subs-of" onclick="subsOf()">Подписки</a>
        <div id="subs-of-window" class="subs-window">
            <div class="model-content">
                <span class="close-of">&times;</span>
                <p>Ваши подписчики</p>
                <div class="user-sub-blocks">
                    <div class="user-sub-block">
                        <img src="img/user-img.png" alt="Friend-photo" width="50px">
                        <a href="#">Андрей Андреев</a>
                    </div>
               
                </div>

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

.subs-window {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0,0,0,0.8);

}

    function subsOfMine () {


        let model = document.getElementById("subs-of-mine-window");
        let btn = document.getElementById("subs-of-mine");
        let span = document.getElementsByClassName("close-of-mine")[0];

        btn.onclick = function () {
            model.style.display = 'block';
        }

        span.onclick = function () {
            model.style.display = 'none';
        }

        window.onclick = function (event) {
            if (event.target == model) {
                model.style.display = 'none';
            }
        }
    }


    function subsOf () {


        let model = document.getElementById("subs-of-window");
        let btn = document.getElementById("subs-of");
        let span = document.getElementsByClassName("close-of")[0];

        btn.onclick = function () {
            model.style.display = 'block';
        }

        span.onclick = function () {
            model.style.display = 'none';
        }

        window.onclick = function (event) {
            if (event.target == model) {
                model.style.display = 'none';
            }
        }
    }

Answer 1

Задержка

Вы вешаете функцию на обработчик событий, которая вешает обработчик событий. Это большая ошибка, именно поэтому только лишь после срабатывания функции будет отрабатывать код при клике. Уберите в HTML коде с ваших элементов срабатывание функции в onclick:

<a href="#" class="subs-of-mine" id="subs-of-mine" onclick="subsOfMine()">Подписчики</a>

Меняем на

<a href="#" class="subs-of-mine" id="subs-of-mine">Подписчики</a>

И добавьте срабатывание функции при загрузке страницы в js:

window.onload = function() {
  subsOfMine();
  subsOf();
};

Таким образом, при загрузке страницы у вас уже будут работать обработчики событий.

Скрытие модального окна

Окно не уходит, потому что Вы не указали обработчик событий для модального окна .subs-of-mine-window

Добавьте следующий код в функцию subsOfMine():

let somw = document.querySelector("#subs-of-mine-window");
        
        
somw.onclick = function () {
     if (event.target == model) {
                model.style.display = 'none';
     }
}

БЛОГ НА HUSL

Почему скрипт выполняется с задержкой?

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