Верстаю сайт/веб-приложение, нужно было сделать меню-бургер - сделал. Анимация на месте, красиво, работает, добавляю класс 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")
})
})
Ошибка в консоли браузера
