Помогите, пожалуйста! Не открывается мобильное меню на нескольких новых страницах. Ошибка Cannot read property 'addEventListener' of null

Karina · May 10, 2019

Здравствуйте! Помогите, пожалуйста, разобраться. Я только начинаю свой путь в разработке, так вот проблема в следующем: не открывается мобильное меню на нескольких новых страницах сайта, которые я должна сверстать, то есть изначально была одна страница (прикрепленный файл 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>

Edited May 10, 2019 by Karina

Sign In

Помогите, пожалуйста! Не открывается мобильное меню на нескольких новых страницах. Ошибка Cannot read property 'addEventListener' of null

Question

Karina

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information