Karina

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,293
    Total Members
    3,128
    Most Online
    Foxyded support
    Newest Member
    Foxyded support
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.