Jump to content
  • Sign Up
Karina

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

Recommended Posts

Karina

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Member Statistics

    46,896
    Total Members
    1,451
    Most Online
    Neovo
    Newest Member
    Neovo
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

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

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

    • Xandr555
      Добрый вечер! Подскажите.. Не работает форма, заполнил поля php mail, некоторые синтаксисы не знаю. Код ниже. Скрипт пробовал в хеде и в выложенной вариации, не идет сообщение. Заранее спасибо. <!DOCTYPE html> <html> <head> <title>index.html</title> <meta charset="utf-8"/> </head> <body> <form class="form-horizontal" target="_blank" method="post" id="form" enctype="multipart/form-data"> <div class="form-group"> <label class="col-sm-2 control-label">Ф.И.О.:</label> <div class="col-sm-10"> <input class="form-control" type="text" name="name" placeholder="Имя" required /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Телефон:</label> <div class="col-sm-10"> <input class="form-control" type="text" name="number" pattern="^[0-9]{11}$" placeholder="Телефон" required /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Эл. почта:</label> <div class="col-sm-10"> <input class="form-control" type="email" name="email" placeholder="E-mail" required /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <textarea class="form-control" rows="3" name="message" placeholder="Ваше сообщение" required></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button class="btn btn-default">Отправить</button> <label class="sucsses">СООБЩЕНИЕ ОТПРАВЛЕНО</label> </div> </div> </form> <script> $("#form").submit(function() { $.ajax({ type: "POST", url: "http://mysite.ru/mail9.php", data: $(this).serialize() }).done(function() { $(this).find("input").val(""); $(".sucsses").fadeIn("1500"); setTimeout(function() { $(".sucsses").fadeOut("1500"); }, 2500); $("#form").trigger("reset"); }); return false; }); </script> </body> </html> <!DOCTYPE html> <html> <head> <title>mail9</title> <meta charset="utf-8"/> </head> <body> <?php $recepient = "[email protected]"; $name = trim($_POST["name"]); $number = trim($_POST["number"]); $email = trim($_POST["email"]); $message = trim($_POST["message"]); $message = "Имя: $name \nТелефон: $number \nЕmail: $email \nСообщение: $message"; $headers = 'Content-type: text/plain; charset="utf-8"'; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "From: [email protected]\r\n"; $headers .= "Reply-To: [email protected]\r\n"; $pagetitle = "Сообщение с АЛЬЯНС-сайта"; mail($recepient, $pagetitle, $message, $headers); ?> </body> </html>  
    • Awilum
      Дорогие Друзья! Рад вам сообщить о выходе новой версии движка Flextype 0.9.9! В Flextype 0.9.9 достаточно много важных изменений определяющих — то как будет выглядеть финальная версия Flextype 1.0.0, к которой я иду уже более двух лет! Были пересмотрены, обновлены и переписаны ключевые моменты ядра, ответственные за работу с Записями, Коллекциями, Кешем и Rest API. Подробнее в статье: https://vk.com/@flextype-flextype-099-reliz Большое спасибо всем за то, что вы являетесь частью сообщества Flextype!
    • DevCube
      Привет! Меня зовут Евгения и я ищу талантливых программистов в компанию DevCube. https://mydevcube.com/ Это международная компания, которая занимается DevOps, web и software разработками. На данный момент в команду требуются Full stack .NET (Junior & Senior) — 3+ year of commercial experience; — Strong knowledge of Angular 5+; — Strong knowledge of Typescript; — Experience with HTML/HTML5, CSS/CSS3, SCSS; — Good understanding of Git; — Conversational English. Будет плюсом: VB experience Условия: Удаленная работа full-time Зарплата от 10-20$/час по результатам собеседования. Обязательное условие - быть на связи до 21-22:00 по Москве. Для отклика прошу писать на почту: [email protected]
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...