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,391
    Total Members
    3,128
    Most Online
    VlGo
    Newest Member
    VlGo
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.



  • Спрашивают сейчас

  • Пишут сейчас

    • Каким должно быть меню на чистом css или с JS сама реализации кнопки анимации открыть/закрыть ?
      Как меню должно работать, вы скажет какой вариант выберешь такой и будет, я верстаю первый шаблон и для меня очень важно отталкиваться в правильном направлении, если можно плюсы и минусы обеих вариантов кто понимает в этом или свой вариант если есть по лучше чем эти, буду очень благодарен

      Варик 1 на чистом css
      https://codepen.io/kretzm/pen/guwEf?editors=0110
      Варик 2 за счет js
      https://codepen.io/porsake/pen/omggbV
    • position: absolute; поможет выйти из ситуации?
    • Как правильно сверстать картинки(руку, лист салата и тд) на данном шаблоне?
      Интересуют именно первые 3 изображения, а именно тарелка, рука с дошиком и лист салата.
      Тарелку можно просто сверстать допустим на флексах разбив блок на 3 столбца. Но вот интересно как сверстать две оставшиеся картинки так еще и с текстом.
      Я подумал, что можно также сверстать на тех же флексах разбив на те же 3(в случае с рукой) и 2(в случае с листом салата) колонки флекс сетку, но в таком случае изображения толкали бы друг друга так как рука с тарелкой и лист салата имеют общую площадь расположения на странице. Как это сделать? Помогите пожалуйста, может какое-то свойство прилипания или вообще другой метод верстки?
  • Popular Contributors

    Nobody has received reputation this week.