Почему не срабатывает слушатель событий?

Question

[Alex Ozerov]

Два файла. Один содержит слушатели, другой ajax запрос. Если подключены оба: ajax - первый подключенный - срабатывает ajax, но не срабатывает открытие попап из другого файла, и наоборот, первый это модалка - не срабатывает ajax. Пробовал слушатели вставлять в файл с аджаксом, тоже самое. Пробовал слушатели поместить внутрь if(response.ok) - то же не работает.

<div class="popup_notice popup_hidden">

    <div class="popup__wrap">
        <div class="popup__main">
            <div class="popup_notice__img flex_bas">
                <img src="./assets/img/10.png" alt="">
            </div>
            <div class="popup_notice__info flex_bas">
                <h2 class="popup_notice__info_title">Title - Все вставки текста ниже это текст рыба</h2>
                <p class="popup_notice__info_disc">Lorem ipsum dolor sit amet, consectetur adipisicing</p>
                <p class="popup_notice__info_date">Дата: data</p>
                <p class="popup_notice__info_time">Час: time</p>
            </div>
        </div>
        <div class="popup__close">
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<script src="assets/js/listeners.js"></script>
<script src="assets/js/ajax_popup.js"></script>

//Ajax_popup.js
function get_id(event){
    const target = event.target.getAttribute('data-identity');
    return target;
}

async function send_request(event){
    let id = get_id(event);

    let response = await fetch('./get_info_popup.php', {
        method: 'post',
        body: JSON.stringify({id: id}),
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    });

    if (response.ok) { // если HTTP-статус в диапазоне 200-299
        let json = await response.json();
        let json_event = json[0];

        document.querySelector('.popup_notice__img img').src = json_event.img;
        document.querySelector('.popup_notice__info_title').innerHTML = json_event.title;
        document.querySelector('.popup_notice__info_disc').innerHTML = json_event.disc;
        document.querySelector('.popup_notice__info_date').innerHTML = json_event.date;
        document.querySelector('.popup_notice__info_time').innerHTML = json_event.time;
    } else {
        alert("Ошибка HTTP: " + response.status);
    }

}
document.querySelector('.notification').onclick = e => {
    send_request(e);
}


// Listener.js


function hide_popup(){
    document.querySelector('.popup_notice').classList.toggle('popup_hidden');
    console.log('Hide!')
}
document.querySelector('.event__button span').onclick = hide_popup;
document.querySelector('.popup__close').onclick = hide_popup;

Answer 1

[Роман]

<script src="assets/js/listeners.js" defer></script>
<script src="assets/js/ajax_popup.js" defer></script>

Сори, обманул вас. Просто для установки слушателей используйте addEventListener, но и параметр defer у скриптов оставьте, лишним не будет)

document.querySelector('.notification').addEventListener("click", e => {
    send_request(e);
}, false);

document.querySelector('.event__button span').addEventListener("click", hide_popup, false);
document.querySelector('.popup__close').addEventListener("click", hide_popup, false);

ну и обратите внимание, что в представленном html коде нет следующих элементов, на которые вы пытаетесь повесить обработчики:
- элемента span с классом .event__button
- элемента с классом .notification
Возможно они у вас остались гдето за рамками представленного html кода.

Comments

[Alex Ozerov]

я уже было обрадовался, потому что очень хорошая подсказка, но не сработало

[Роман]

Alex Ozerov, исправил ответ, но тем не менее defer оставьте. Ошибка в том, что на свойство .onclick(как в прочем и на любое другое из .on... можно повесить лишь один обработчик на один элемент, при попытке повесить следующий предыдущий будет потерян.
Для того чтобы повесить несколько обработчиков используйте метод .addEventListener("click",handler,false)

[Alex Ozerov]

Роман, всему виной моя невнимательность. Вам спасибо!