@Rogozis

JS скрипт для бургера не работает ни в одном браузере, а в консоли ошибка, которую я не понимаю даже описания. Что сделать?

Верстаю сайт/веб-приложение, нужно было сделать меню-бургер - сделал. Анимация на месте, красиво, работает, добавляю класс open через консоль в браузере, и, во-первых, этот класс пропадает при каждом обновлении страницы, во вторых вылезает ошибка, по которой я перекопал кучу форумов и документов, но так и не понял, что с ней делать. Ну и в третьих - мой инлайн скрипт не срабатывает, т.е. при нажатии на бургер ничего не происходит, но при этом, например, при вводе команды alert в том же скрипте - уведомление корректно отображается. Скрин прикрепляю, исходный код тоже

В самом коде класс filters отвечает за боковую панель, к нему применяется класс open для, соответственно, открытия-закрытия меню. При активации чекбокса open в разделе .cls девтула анимация срабатывает, но сам скрипт - нет. Всё ли я правильно подключил? Есть ли ошибки в скрипте? Связана ли вообще эта ошибка в консоли с тем, что скрипт не работает? У меня истерика начнётся, если эта проблема не решится, ибо такой сорт ошибок самый мерзкий, когда ты вообще не понимаешь, что ты делаешь не так. Помогите христа бога ради

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BEEFEATER</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="css/test_style.css">

  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght@300;400;500;600;700;800;900&family=Jomhuria&family=Kadwa:wght@400;700&family=Kaisei+Decol&family=Nanum+Myeongjo&family=Roboto+Slab:wght@100..900&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    
    <!-- JS Script -->
    <script defer src="js/main.js"></script>
</head>

<body>
  <header class="site-header py-3">
    <div class="container">
      <div class="logo align-items-center">
        <a href="#" class="brand text-white">
          <h1 class="site-title mb-0">BEEFEATER</h1>
          <p class="site-subtitle mb-0">Wine • Meat • Friends</p>
        </a>
      </div>
    </div>
  </div>
</header>
<div class="filters">
  <button class="burger-btn" id="burger">
    <span></span><span></span><span></span>
  </button>
  <nav class="filter-menu">
    <ul type="none" class="filter-list">
      <a href="#"><li class="item">Italy</li></a>
      <a href="#"><li class="item">France</li></a>
      <a href="#"><li class="item">Germany</li></a>
      <a href="#"><li class="item">Spain</li></a>
    </ul>
    </div>
   
    <div class="container-search">
        <form>
          <div class="input-group search-bar mr-3">
            <div class="input-group-icon">
              <span class="input-group-text" id="search-icon"><i class="bi bi-search"></i></span>
            </div>
          <input type="text" class="form-control" id="search-input" placeholder="Search...">
        </div>
      </form>
    </div>
    </nav>

</body>
</html>


CSS

.container {
    min-width: 1200px;
}

.brand {
    text-decoration: none !important;
    color: white;
}

.site-header {
    background-color: #B82A2A;
    height: 100px;
    width: 100%;
    padding-left: 0px;
    padding-right: 370px;
}

.filters {
    right: 30px;
    position: relative;
}

.filter-menu {
    width: 200px;
    height: 500px;
    position: absolute;
    padding-top: 100px;
}

.filter-list a {
    text-decoration: none;
    color: black;
    font-family: 'Inknut Antiqua';
    font-style: normal;
    line-height: 40px;
}


.form-control {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
}

.form-control:focus {
    outline: none;
    box-shadow: 0 0 5px #B82A2A;
    border-color: #B82A2A;
    transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.search-bar {
    display: flex;
    margin-left: 45%;
    width: 350px;
    margin-top: 5px;
    position: relative;
}

.site-title {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 800;
}

.site-subtitle {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 600;
}

.burger-btn {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background-color: white;
    
}

.burger-btn span {
    position: absolute;
    width: 30px;
    height: 3px;
    background-color: black;
    left: 32px;
    transition: transform 0.5s, opacity 0.5s;
}

.burger-btn span:nth-child(1) {
    transform: translateY(-10px)   
}

.burger-btn span:nth-child(3) {
    transform: translateY(10px)
}

.filters.open .burger-btn span:nth-child(2) {
    opacity: 0;
}

.filters.open .burger-btn span:nth-child(1) {
    transform: translateY(0) rotate(45deg);
}

.filters.open .burger-btn span:nth-child(3) {
    transform: translateY(0) rotate(-45deg);
}

@media (max-width: 800px) {
    .burger-btn {
        display: block;
        position: absolute;
    }
    .filter-menu {
        position: absolute;
        left: -120px;
        transition: transform 0.5s;
    }
    .filters.open .filter-menu {
        transform: translateX(120px);
    }
}


JavaScript

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("burger").addEventListener("click", function() {
        document.querySelector("filters").classList.toggle("open")        
    })
})


Ошибка в консоли браузера
66831792b8b74430052222.png
  • Вопрос задан
  • 177 просмотров
Решения вопроса 1
@ikutin
политика сервера заблокировало скрипт https://developer.mozilla.org/en-US/docs/Web/HTTP/...
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы