0

такая ситуация. Имеется код на:

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") не работают вообще, скорее всего я неверно подтягиваю теги, потому прошу о помощи. Буду благодарен за совет/решение, т.к. вообще не понимаю, что не так

15
  • getElementsByTagName возвращает html коллекцию и вы её сравниваете с эл-том?
    – InDevX
    18 окт 2022 в 19:40
  • "сравниваете с эл-том" - можете объяснить, что значит это? Не совсем понимаю, если имеете ввиду, что через getElementsByTagName не достучаться к нужным тегам, то я пробовал и через querySelector (All в том числе) и тоже не работает, пока более глубоко разбираюсь в структуре DOM и решения пока не нахожу 19 окт 2022 в 11:31
  • Если вы о том, что в HTML коде нет запрашиваемого тега - это лишь непосредственно нативная часть той функции, которую я пробую так сказать склепать. Во всём документе в разных местах есть запрашиваемые теги, у меня вопрос - как к каждому из них можно одновременно достучаться и дальше использовать 19 окт 2022 в 11:36
  • Я вот об этом 'if (closeChat.target === aaablya) {' - добавьте перед условием вывод в консоль console.log(closeChat.target, aaablya) и посмотрите что вы сравниваете. *моргните, если поняли
    – InDevX
    19 окт 2022 в 11:42
  • Так, дошло, что имеете ввиду, не зря стебанулись с меня. Спасибо за наводку. Выводиться коллекция, но застопорился на ней, её перебором и использованием. Если можете помочь, за что буду признателен, есть таков код: 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"); } }); 20 окт 2022 в 12:33

1 ответ 1

0

И так, в комментариях InDevX помог решить такую банальную, но проблему, за что ему благодарность. Код решения:

//вытягиваем теги из документа и переводим коллекцию с ними в массив
let aaaArray = Array.from(document.getElementsByTagName('a'));
/*методом forEach вызываем каждый элемент массива 
и вешаем на каждый элемент обработчик событий*/
aaaArray.forEach(el => {
  el.addEventListener("click", evt => {
    chatPopupForm.classList.remove("active_chat_form");
  });
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.