Здравствуйте! Помогите, пожалуйста, разобраться. Я только начинаю свой путь в разработке, так вот проблема в следующем: не открывается мобильное меню на нескольких новых страницах сайта, которые я должна сверстать, то есть изначально была одна страница (прикрепленный файл product-cherry.html), созданная другим программистом. На новой странице (прикрепленный файл index.html) header остается тем же, за исключением 3-го пункта меню (но я не меняла класс для него). Буду очень благодарна за помощь!
TypeError: Cannot read property 'addEventListener' of null
Разметка header на первоначальной странице (где все работает)
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Джем</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="main_wrap">
<header class="header">
<nav class="header__menu">
<li class="header__menu-djem header__menu-djem__cherry" data-link="djem">
<a href="index.html#jam-id">Джем</a>
</li>
<li class="header__menu-sets header__menu-sets__cherry" data-link="set">
<a href="index.html#sets-id">Наборы</a>
</li>
<li class="header__menu-coop header__menu-coop__cherry">
<a href="cooperation.html">Сотрудничество</a>
</li>
</nav>
<div class="header__logo"></div>
<button class="header__btn-call header__btn-call__cherry" type="button" name="button" data-for-modal="send-modal">
Позвоните мне
</button>
<button class="header__btn-opt header__btn-opt__cherry" type="button" name="button">
<a href="cooperation.html">Опт</a>
</button>
<button class="header__btn-basket"></button>
<div class="header__soc">
<a target="_blank" href="https://www.instagram.com/cookerybox/"></a>
<a target="_blank" href="https://vk.com/cookerybox"></a>
</div>
<div class="header__menu_mob" data-link="mobile">
<span></span>
<span></span>
<span></span>
</div>
<ul class="header__mobile-menu header__mobile-menu__cherry mobile-hide" data-menu="mobile">
<a class="header__mobile-menu__djem" data-link="mobile-2" href="index.html#jam-id">
Джемы
</a>
<a class="header__mobile-menu__djem" data-link="mobile-3" href="index.html#sets-id">
Наборы
</a>
<a href="cooperation.html">
Сотрудничество
</a>
</ul>
</header>
Скрипт menu.js
class Menu {
constructor(link, menu) {
this.link = document.querySelector(`[data-link=${link}]`)
this.menu = document.querySelector(`[data-menu=${menu}]`)
this.link.addEventListener('click', this.showMenu.bind(this))
this.show = `${menu}-show`
this.hide = `${menu}-hide`
this.active = `${link}-active`
this.notActive = `${link}-not-active`
this._show = false
}
showMenu() {
if(!this._show) {
this.menu.classList.remove(this.hide)
this.menu.classList.add(this.show)
this.link.classList.add(this.active)
this.link.classList.remove(this.notActive)
this._show = true
}
else {
this.menu.classList.remove(this.show)
this.menu.classList.add(this.hide)
this.link.classList.remove(this.active)
this.link.classList.add(this.notActive)
this._show = false
}
}
}
// desktop menu
const menu1 = new Menu('djem', 'djem')
const menu4 = new Menu('set', 'set')
// mobile menu level 1
const menu2 = new Menu('mobile', 'mobile')
//mobile menu level 2
const menu3 = new Menu('mobile-2', 'mobile-2')
const menu5 = new Menu('mobile-3', 'mobile-3')
Разметка header на новой странице
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Главная "Cookery box"</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="main_wrap main_index">
<header class="header">
<nav class="header__menu">
<li class="header__menu-djem" data-link="djem">
<a href="#jam-id">Джем</a>
</li>
<li class="header__menu-sets" data-link="set">
<a href="#sets-id">Наборы</a>
</li>
<li class="header__menu-coop">
<a href="#forkitchen-id">Для кухни</a>
</li>
</nav>
<div class="header__logo"></div>
<button class="header__btn-call" type="button" name="button" data-for-modal="send-modal">
Позвоните мне
</button>
<button class="header__btn-opt" type="button" name="button">
<a href="cooperation.html">Опт</a>
</button>
<button class="header__btn-basket"></button>
<div class="header__soc">
<a target="_blank" href="https://www.instagram.com/cookerybox/"></a>
<a target="_blank" href="https://vk.com/cookerybox"></a>
</div>
<div class="header__menu_mob" data-link="mobile">
<span></span>
<span></span>
<span></span>
</div>
<ul class="header__mobile-menu mobile-hide" data-menu="mobile">
<a class="header__mobile-menu__djem" data-link="mobile-2" href="#jam-id">
Джемы
</a>
<a class="header__mobile-menu__djem" data-link="mobile-3" href="#sets--id">
Наборы
</a>
<a href="#forkitchen-id">
Для кухни
</a>
</ul>
</header>
