такая ситуация. Имеется код на:
HTML:
<div class="chat_block">
<img src="images/Chat.svg">
</div>
<form class="chat_popup_form">
<h4 class="close_chat_window">Закрити</h4>
<div class="message_block">
<label class="label_message">
<textarea type="text" name="message"></textarea>
<div class="label_of_message">
Сообщение
</div>
</label>
</div>
<button type="submit" class="message_submit">Написать</button>
</form>
JavaScript:
let chatPopupOpen = document.querySelectorAll(".chat_block");
let chatPopupForm = document.querySelector(".chat_popup_form");
let closeChatButton = document.querySelector(".close_chat_window");
let aaablya = document.getElementsByTagName('a');
chatPopupOpen.forEach((chatButton) => {
chatButton.addEventListener("click", () => {
chatPopupForm.classList.add("active_chat_form");
});
});
closeChatButton.addEventListener("click", () => {
chatPopupForm.classList.remove("active_chat_form");
});
document.addEventListener("click", (closeChat) => {
if (closeChat.target === aaablya) {
chatPopupForm.classList.remove("active_chat_form");
}
});
Не думаю, что CSS имеет большое влияние на проблему + стилей, мешающих её решению, у меня в файле точно нет
Сама проблема: хочу реализовать закрывание модального окна через клик по любому тегу <a>
(в моём случае) на странице (вне зависимости от расположения тега в DOM-дереве).
Например пользователь открыл чат и у него есть 2 способа закрытия чата: через саму кнопку closeChatButton и через клик по любой ссылке (тегу <a>
) в документе (смысла от диалогового окна не будет, если пользователь решит совершить другое действие, не совершив закрытие чат-окна)
document.getElementsByTagName('a')
, document.querySelector("a")
и document.querySelectorAll("a")
не работают вообще, скорее всего я неверно подтягиваю теги, потому прошу о помощи. Буду благодарен за совет/решение, т.к. вообще не понимаю, что не так
getElementsByTagName
не достучаться к нужным тегам, то я пробовал и черезquerySelector
(All
в том числе) и тоже не работает, пока более глубоко разбираюсь в структуре DOM и решения пока не нахожуconsole.log(closeChat.target, aaablya)
и посмотрите что вы сравниваете. *моргните, если понялиlet aaa = document.getElementsByTagName("a");//Вытягиваю коллекцию let mmm; //Цикл для пересчёта элементов коллекции и записи в пустую переменную mmm for (let r = 0; r < aaa.length; r++) { mmm += aaa[r]; }; document.addEventListener("click", (closeChat) => { if (closeChat.target === mmm) { chatPopupForm.classList.remove("active_chat_form"); } });