Начал изучать битрикс и столкнулся с проблемой при подключении собственного js файла.
Есть выполняемый скрипт например
| Код |
|---|
const menuOpen = () => {
const menuBtn = document.querySelector(".mobile__menu-btn");
const mobileMenu = document.querySelector(".mobile__menu-wrapper");
const mobileBody = document.querySelector("#phone__menu-id-body");
menuBtn.addEventListener("click", openMenu);
function openMenu() {
if (mobileMenu.classList.contains("menu-active")) {
menuBtn.classList.remove("menu-active");
mobileMenu.classList.remove("menu-active");
mobileBody.style.overflow = "visible";
} else {
menuBtn.classList.add("menu-active");
mobileMenu.classList.add("menu-active");
mobileBody.style.overflow = "hidden";
}
}
};
menuOpen(); |
Вылетает ошибка в консоль
| Код |
|---|
Uncaught TypeError: menuBtn is null |
Насколько я понял, данная ошибка вызвана тем, что DOM еще не сформировался, а скрипт уже начал выполняться, соответственно вылезла ошибка что элемент пустой, это понятно.
Сразу решил пофиксить эту ошибку, тем чтобы перенести подключение js файла в footer, но этот вариант не помог.
Нашел следующий вариант решения проблемы
| Код |
|---|
document.addEventListener("DOMContentLoaded", function() {
...code;
}); |
Всё окей, скрипт отрабатывает, но насколько я понимаю это костыльный вариант, есть ли какое-нибудь другое решение данной проблемы? В обычном js, есть атрибут defer, который позволяет в фоном режиме загружать скприт js. Есть ли что-то подобное в битриксе?
1. Есть ли другой вариант решения данной проблемы?
2. Есть ли в битриксе аналог подключения js файла с помощью атрибута defer?
Буду благодарен любой помощи!