Не срабатывает js-код, в чём проблема?

Question

Евгений Савин @Storos

Начинающий web разработчик

Не срабатывает js-код, в чём проблема?

Всем привет! Помогите, пожалуйста, разобраться с кодом. Верстаю сайт по видео(учусь), всё делаю точь-в-точь, но с js-кодом какая-то непонятная проблема. Ниже ссылка на код. Там есть меню с разделами, по задумке при клике по его пунктам должно выпадать ещё меню, а к определённым блокам добавляться классы. Но в итоге ничего не получается. Ссылка Нужный js-код в самом конце соответствующего окна
Нужная часть кода ниже

// Подключение функционала "Чертогов Фрилансера"
//import { isMobile } from "./functions.js";
// Подключение списка активных модулей
//import { flsModules } from "./modules.js";


document.addEventListener("click", documentActions);

function documentActions(e) {
	const targetElement = e.target;
	if (targetElement.closest('[data-parent]')) {
		const subMenuId = targetElement.dataset.parent ? targetElement.dataset.parent : null;
		const subMenu = document.querySelector('[data-submenu="${subMenuId}"]');
		const catalogMenu = document.querySelector('.catalog-header');

		if (subMenu) {
			catalogMenu.classList.toggle('_sub-menu-show');
			targetElement.classList.toggle('_sub-menu-active');
			subMenu.classList.toggle('_sub-menu-open');
		} else {
			console.log("No exsist");
		}

		e.preventDefault();
	}
}

<div class="header__catalog catalog-header">
		<div class="catalog-header__container">
			<nav class="catalog-header__menu menu-catalog">
				<ul class="menu-catalog__list">
					<li class="menu-catalog__item">
						<button data-parent="1" class="menu-catalog__link">Каталог ножей</button>
					</li>
					<li class="menu-catalog__item">
						<button data-parent="2" class="menu-catalog__link">Клинковое оружие</button>
					</li>
					<li class="menu-catalog__item">
						<button class="menu-catalog__link">Сувенирные изделия</button>
					</li>
					<li class="menu-catalog__item">
						<button class="menu-catalog__link">Фонари ARMYTEK</button>
					</li>
					<li class="menu-catalog__item">
						<button class="menu-catalog__link">Сопуствующие товары</button>
					</li>
				</ul>
				<div class="menu-catalog__sub-menu sub-menu-catalog">
					<div class="sub-menu-catalog__container">

						<div data-submenu="1" class="sub-menu-catalog__block">

							<div class="sub-menu-catalog__column">
								<a href="" class="sub-menu-catalog__category">Категория ножей</a>
								<ul class="sub-menu-catalog__list">
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Разделочные ножи</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Туристические ножи</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи охотничьи</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Булатные ножи</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из дамаска</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Тактического назначения</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Метательные ножи</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Мачете и кукри</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи кухонные</a>
									</li>
								</ul>
								<a href="" class="sub-menu-catalog__all">Смотреть все</a>
							</div>

							<div class="sub-menu-catalog__column">
								<a href="" class="sub-menu-catalog__category">Производство ножей</a>
								<ul class="sub-menu-catalog__list">
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи АИР</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи ЗИК</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи ЗЗОСС</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи РОСоружие</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи Оружейник</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Булат Сергея Баранова</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Булат Андрея Умерова</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи Златко</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи Стиль-М</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Оружейная компания</a>
									</li>
								</ul>
								<a href="" class="sub-menu-catalog__all">Смотреть все</a>
							</div>

							<div class="sub-menu-catalog__column">
								<a href="" class="sub-menu-catalog__category">Ножи по маркам стали</a>
								<ul class="sub-menu-catalog__list">
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из стали 40х102С2М</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из стали 95х18</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из стали 100х13м</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из стали 110х18м-ШД</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из стали ЭИ-107 ТЦ</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из стали 50х14МФ</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из стали AUS-8</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из стали К340</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из стали M390</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из стали ЭП-766</a>
									</li>
								</ul>
								<a href="" class="sub-menu-catalog__all">Смотреть все</a>
							</div>

							<div class="sub-menu-catalog__column">
								<a href="" class="sub-menu-catalog__category">Заточка и полировка ножей</a>
								<ul class="sub-menu-catalog__list">
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Паста ГОИ</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Алмазная паста</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Бруски и камни для заточки</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Заточные системы</a>
									</li>
								</ul>
								<a href="" class="sub-menu-catalog__all">Смотреть все</a>
							</div>

							<div class="sub-menu-catalog__column">
								<a href="" class="sub-menu-catalog__category">Ножевая мастерская</a>
								<ul class="sub-menu-catalog__list">
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножевые клинки</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Заготовки для ножей</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Литье для ножей</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Материалы для рукоятей</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Уход за рукоятиями ножей</a>
									</li>
								</ul>
								<a href="" class="sub-menu-catalog__all">Смотреть все</a>
							</div>

						</div>

						<div data-submenu="2" class="sub-menu-catalog__block">

							<div class="sub-menu-catalog__column"></div>
							<div class="sub-menu-catalog__column"></div>
							<div class="sub-menu-catalog__column"></div>

						</div>
					</div>
					
				</div>
			</nav>
		</div>
	</div>

Вопрос задан более двух лет назад
217 просмотров

9 комментариев

Подписаться 1 Простой 9 комментариев

Elvis @Dr_Elvis

ссылка то ведет сюда. прикладывайте код

Написано более двух лет назад
Евгений Савин @Storos Автор вопроса

Elvis, Испарвил)

Написано более двух лет назад
ThunderCat @ThunderCat Куратор тега CSS

Чета дохуа кода, разбираться долго. Короче, ищите обработчики клика на ваши пункты, отслеживайте через консоль.лог() чего там происходит (и происходит ли вообще что-то), потом пишите если что-то конкретно в конкретном участке кода не понятно.

Написано более двух лет назад

Евгений Савин @Storos Автор вопроса

ThunderCat, в этом коде. Ошибок не показывает, но не работает. А у автора видео всё норм. Спасибо

// Подключение функционала "Чертогов Фрилансера"
//import { isMobile } from "./functions.js";
// Подключение списка активных модулей
//import { flsModules } from "./modules.js";


document.addEventListener("click", documentActions);

function documentActions(e) {
	const targetElement = e.target;
	if (targetElement.closest('[data-parent]')) {
		const subMenuId = targetElement.dataset.parent ? targetElement.dataset.parent : null;
		const subMenu = document.querySelector('[data-submenu="${subMenuId}"]');
		const catalogMenu = document.querySelector('.catalog-header');

		if (subMenu) {
			catalogMenu.classList.toggle('_sub-menu-show');
			targetElement.classList.toggle('_sub-menu-active');
			subMenu.classList.toggle('_sub-menu-open');
		} else {
			console.log("No exsist");
		}

		e.preventDefault();
	}
}

<div class="header__catalog catalog-header">
		<div class="catalog-header__container">
			<nav class="catalog-header__menu menu-catalog">
				<ul class="menu-catalog__list">
					<li class="menu-catalog__item">
						<button data-parent="1" class="menu-catalog__link">Каталог ножей</button>
					</li>
					<li class="menu-catalog__item">
						<button data-parent="2" class="menu-catalog__link">Клинковое оружие</button>
					</li>
					<li class="menu-catalog__item">
						<button class="menu-catalog__link">Сувенирные изделия</button>
					</li>
					<li class="menu-catalog__item">
						<button class="menu-catalog__link">Фонари ARMYTEK</button>
					</li>
					<li class="menu-catalog__item">
						<button class="menu-catalog__link">Сопуствующие товары</button>
					</li>
				</ul>
				<div class="menu-catalog__sub-menu sub-menu-catalog">
					<div class="sub-menu-catalog__container">

						<div data-submenu="1" class="sub-menu-catalog__block">

							<div class="sub-menu-catalog__column">
								<a href="" class="sub-menu-catalog__category">Категория ножей</a>
								<ul class="sub-menu-catalog__list">
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Разделочные ножи</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Туристические ножи</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи охотничьи</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Булатные ножи</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из дамаска</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Тактического назначения</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Метательные ножи</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Мачете и кукри</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи кухонные</a>
									</li>
								</ul>
								<a href="" class="sub-menu-catalog__all">Смотреть все</a>
							</div>

							<div class="sub-menu-catalog__column">
								<a href="" class="sub-menu-catalog__category">Производство ножей</a>
								<ul class="sub-menu-catalog__list">
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи АИР</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи ЗИК</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи ЗЗОСС</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи РОСоружие</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи Оружейник</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Булат Сергея Баранова</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Булат Андрея Умерова</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи Златко</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи Стиль-М</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Оружейная компания</a>
									</li>
								</ul>
								<a href="" class="sub-menu-catalog__all">Смотреть все</a>
							</div>

							<div class="sub-menu-catalog__column">
								<a href="" class="sub-menu-catalog__category">Ножи по маркам стали</a>
								<ul class="sub-menu-catalog__list">
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из стали 40х102С2М</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из стали 95х18</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из стали 100х13м</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из стали 110х18м-ШД</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из стали ЭИ-107 ТЦ</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из стали 50х14МФ</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из стали AUS-8</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из стали К340</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из стали M390</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножи из стали ЭП-766</a>
									</li>
								</ul>
								<a href="" class="sub-menu-catalog__all">Смотреть все</a>
							</div>

							<div class="sub-menu-catalog__column">
								<a href="" class="sub-menu-catalog__category">Заточка и полировка ножей</a>
								<ul class="sub-menu-catalog__list">
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Паста ГОИ</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Алмазная паста</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Бруски и камни для заточки</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Заточные системы</a>
									</li>
								</ul>
								<a href="" class="sub-menu-catalog__all">Смотреть все</a>
							</div>

							<div class="sub-menu-catalog__column">
								<a href="" class="sub-menu-catalog__category">Ножевая мастерская</a>
								<ul class="sub-menu-catalog__list">
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Ножевые клинки</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Заготовки для ножей</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Литье для ножей</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Материалы для рукоятей</a>
									</li>
									<li class="sub-menu-catalog__item">
										<a href="" class="sub-menu-catalog__link">Уход за рукоятиями ножей</a>
									</li>
								</ul>
								<a href="" class="sub-menu-catalog__all">Смотреть все</a>
							</div>

						</div>

						<div data-submenu="2" class="sub-menu-catalog__block">

							<div class="sub-menu-catalog__column"></div>
							<div class="sub-menu-catalog__column"></div>
							<div class="sub-menu-catalog__column"></div>

						</div>
					</div>
					
				</div>
			</nav>
		</div>
	</div>

Написано более двух лет назад

ThunderCat @ThunderCat Куратор тега CSS

Storos, если данный js не заключен в обработчик события загрузки документа, то скорее всего евенты вешаются ДО того, как элементы загрузились в дом дерево, то есть на момент запуска скрипта этих элементов еще нет, и соответственно после загрузки эвентов на них не будет, ну и работать не станет все.

Написано более двух лет назад
Максим Иванов @mikilikala

Ты в конце или в начале подключил js скрипт?

Написано более двух лет назад
Максим Иванов @mikilikala

Ты в конце или в начале подключил js скрипт?

Написано более двух лет назад
Евгений Савин @Storos Автор вопроса

Максим Иванов, да, команда в console.log срабатывает. Проверил, выдает это const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).

Написано более двух лет назад
Евгений Савин @Storos Автор вопроса

blatisgense, нет, Гугл

Написано более двух лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+1 ещё

Простой
Почему дублируются изображения?
- 1 подписчик
- час назад
- 37 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как подключить вконтакте на сайт чтобы слать юзеру в вк уведомления или сообщения?
- нет подписчиков
- 20 часов назад
- 119 просмотров
1

ответ
JavaScript

+1 ещё

Сложный
Fastify долгая загрузка что можно сделать как найти причину?
- 1 подписчик
- вчера
- 49 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- вчера
- 171 просмотр
2

ответа
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- вчера
- 105 просмотров
1

ответ
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 23 нояб.
- 107 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 23 нояб.
- 106 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 105 просмотров
0

ответов
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 23 нояб.
- 714 просмотров
1

ответ
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 78 просмотров
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Доработать админскую часть: Angular

25 нояб. 2024, в 17:04

1000 руб./в час

Разработать автозапуск под Oculus Quest 2\3\3s (версия 71)\Pico 4

25 нояб. 2024, в 17:02

50000 руб./за проект

Дизайн логотипа

25 нояб. 2024, в 17:00

3000 руб./за проект

ссылка то ведет сюда. прикладывайте код
Чета дохуа кода, разбираться долго. Короче, ищите обработчики клика на ваши пункты, отслеживайте через консоль.лог() чего там происходит (и происходит ли вообще что-то), потом пишите если что-то конкретно в конкретном участке кода не понятно.
Storos, если данный js не заключен в обработчик события загрузки документа, то скорее всего евенты вешаются ДО того, как элементы загрузились в дом дерево, то есть на момент запуска скрипта этих элементов еще нет, и соответственно после загрузки эвентов на них не будет, ну и работать не станет все.
Ты в конце или в начале подключил js скрипт?
Максим Иванов, да, команда в console.log срабатывает. Проверил, выдает это const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).

Не срабатывает js-код, в чём проблема?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт