Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.04.2023, 19:21
Аспирант
Отправить личное сообщение для Timurkin Посмотреть профиль Найти все сообщения от Timurkin
 
Регистрация: 12.08.2017
Сообщений: 44

Не определяется функция слушателя событий
Показываю модальку:
<div id="callback" class="modal_b">
    <div class="body">
      <div class="ttl">Заказать консультацию</div>
      <div class="dsc">Напишите нам и мы поможем вам разобраться в вопросах.</div>
      <div class="form v_form">
        <div class="field">
          <input type="text" name="name" class="form-control" placeholder="Ваше имя" data-rules="required">
        </div>
        <div class="field">
          <input type="phone" name="phone" class="form-control" placeholder="Телефон" data-rules="required">
        </div>
        <div class="field">
          <textarea name="dsc" rows="5" class="form-control" placeholder="Сообщение"></textarea>
        </div>
        <div class="action">
          <spa class="btn btn-action go">Отправить</spa>
        </div>
      </div>
    </div>
  </div>


По кукам:
function getCookie(name) {
    let matches = document.cookie.match(new RegExp(
        "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}
let mcookie = getCookie("mcookie");
if (mcookie != "no") {
    setTimeout(function() {
        showModal("obratnyij-zvonok/");     
        document.getElementsByClassName("fancybox-close").addEventListener("click", function() {
			modalwin.style.display="none";  
			// записываем cookie на 1 день, с которой мы не показываем окно
			let date = new Date;
			date.setDate(date.getDate() + 1);	
			document.cookie = "mcookie=no; path=/; expires=" + date.toUTCString();
		});	
    }, 1000);
}


Но почему-то ругается:
Uncaught TypeError: document.getElementsByClassName(...).addEventListe ner is not a function
Ответить с цитированием
  #2 (permalink)  
Старый 10.04.2023, 19:48
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,726

Скорее всего у вас скрипт отрабатывает еще до того, как на странице появится ваше модальное окно.
+ метод `getElementsByClassName` возвращает `HTMLCollection`, а не `HTMLElement`, у которой нет метода `addEventListener`.

Попробуйте так:

function getCookie(name) {
    let matches = document.cookie.match(new RegExp(
        "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}

document.addEventListener('DOMContentLoaded', function() {
    let mcookie = getCookie("mcookie");
    if (mcookie != "no") {
        setTimeout(function() {
            showModal("obratnyij-zvonok/");
            document.querySelector("fancybox-close").addEventListener("click", function() {
                if ('modalwin' in window) {
                    modalwin.style.display = "none";
                }

                // записываем cookie на 1 день, с которой мы не показываем окно
                let date = new Date;
                date.setDate(date.getDate() + 1);
                document.cookie = "mcookie=no; path=/; expires=" + date.toUTCString();
            });
        }, 1000);
    }
});
Ответить с цитированием
  #3 (permalink)  
Старый 10.04.2023, 21:44
Аспирант
Отправить личное сообщение для Timurkin Посмотреть профиль Найти все сообщения от Timurkin
 
Регистрация: 12.08.2017
Сообщений: 44

Nexus, сделал как вы написали, теперь получаю ошибку:
caught TypeError: Cannot read properties of null (reading 'addEventListener')
Ответить с цитированием
  #4 (permalink)  
Старый 10.04.2023, 22:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Timurkin,
точка нужна document.querySelector("тутfancybox-close")
Ответить с цитированием
  #5 (permalink)  
Старый 10.04.2023, 22:02
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,704

Сообщение от Nexus
document.querySelector("fancybox-close").addEventListener("click", function() {
Точка пропущена. Должно быть
document.querySelector(".fancybox-close").addEventListener("click", function() {
Ответить с цитированием
  #6 (permalink)  
Старый 10.04.2023, 22:06
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,704

Сообщение от Timurkin
document.getElementsByClassName("fancybox-close").addEventListener("click", function() {
getElementsByClassName
s - множественное число. Дай элементы
Функция дает список (псевдомассив) элементов, даже если он один.
Надо обращаться к одному элементу
document.getElementsByClassName("fancybox-close")[0].addEventListener("click", function() {
Ответить с цитированием
  #7 (permalink)  
Старый 10.04.2023, 22:21
Аспирант
Отправить личное сообщение для Timurkin Посмотреть профиль Найти все сообщения от Timurkin
 
Регистрация: 12.08.2017
Сообщений: 44

рони,
voraa,
точку добавил.
Теперь:
caught TypeError: Cannot read properties of null (reading 'addEventListener')
Ответить с цитированием
  #8 (permalink)  
Старый 10.04.2023, 22:28
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,704

В вашем html коде вообще нет элемента с классом fancybox-close. Я не знаю, что именно вы ищите, почему он должен быть и где.
В вашем коде его нет. Поэтому результат поиска этого элемента null.
Ответить с цитированием
  #9 (permalink)  
Старый 11.04.2023, 09:04
Аспирант
Отправить личное сообщение для Timurkin Посмотреть профиль Найти все сообщения от Timurkin
 
Регистрация: 12.08.2017
Сообщений: 44

Сообщение от voraa Посмотреть сообщение
В вашем html коде вообще нет элемента с классом fancybox-close. Я не знаю, что именно вы ищите, почему он должен быть и где.
В вашем коде его нет. Поэтому результат поиска этого элемента null.
Дело в том что элемент с классом fancybox-close это кнопка закрытия модального окна.
Самого модального окна на странице изначально нет. Но оно как раз вызывается в коде выше:
showModal("obratnyij-zvonok/");
Ответить с цитированием
  #10 (permalink)  
Старый 11.04.2023, 11:28
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,704

Ну значит надо в отладчике проверять, появляется ли там эта кнопка.
Поставить точку останова после showModal и посмотреть появилась ли она. Если нет - думать почему, если появилась, то с каким точно классом.
Что такое "obratnyij-zvonok/" и точно ли там должен быть /?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как-то странно работает код. Не выполняется целиком функция Yuriy-155 jQuery 7 22.11.2019 16:14
Непредсказуемая функция. Rora_ Node.JS 3 07.11.2017 08:34
Почему не определяется функция? Batyabest AJAX и COMET 4 13.10.2014 15:42
AJAX функция для новых html-элементов broadcast77 AJAX и COMET 25 03.03.2014 14:01
Функция при отсутсвии событий. nechervonez Элементы интерфейса 5 21.04.2010 13:14