CSS grid + javascript (ошибка)

Question

Доброй ночи. Имеется шапка, которая свёрстана на CSS grid. Шапка содержит в себе бургер меню, которое выплывает при разрешении от 992px. Проблема в том, что я недавно начал изучать JS и знаний не совсем хватает для того, чтобы понять, в чём заключается ошибка в скрипте. Скрипт должен при нажатии на бургер открывать меню (dropdown). Кто действительно разбирается, прошу помощи. codepen

var dropdown = document.querySelector("nav .dropdown");
var button = document.querySelector("nav .burger2");


function menu() {
  if (dropdown.style.display === "grid") {
    dropdown.style.display = "none";
    button.innerHTML = "burger2";
  } else {
    dropdown.style.display = "grid";
    button.innerHTML = "close";
  }
}

addEventListener("resize", function() {
  if (window.innerWidth > 993) {
    dropdown.style.display = "none";
    button.innerHTML = "burger";
  }
})

*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: "Times New Roman";
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

nav pre {
  font-size: 25px;
  line-height: 30px;
  color: white;
}

nav .links a {
  font-size: 18px;
  margin: 15px;
  color: white;
}

nav .links a:hover {
  border-bottom: 2px solid white;
}

nav .contacts p {
  font-size: 18px;
  color: white;
}

nav {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  background-color: black;
  height: 100px;
}

.links {
  align-self: center;
  justify-self: center;
}

.logo {
  align-self: center;
  justify-self: center;
}

.contacts {
  align-self: center;
  justify-self: center;
}

.burger {
  display: none;
}

.dropdown {
  display: grid;
  display: none;
}

@media screen and (max-width: 992px) {
  .links {
    display: none;
  }
  .contacts {
    display: none;
  }
  .burger {
    display: block;
    grid-column-start: 3;
    align-self: center;
    justify-self: end;
    margin-right: 20px;
  }
  .dropdown {
    display: block;
    display: grid;
    background-color: #646464;
    text-align: center;
  }
  .dropdown a {
    color: white;
    font-size: 20px;
    padding: 30px;
  }
}

<nav>
  <div class="logo">
    <pre>VLADISLAV BW
      DESIGN</pre>
  </div>

  <div class="links">
    <a href="#">ГЛАВНАЯ</a>
    <a href="#">УСЛУГИ</a>
    <a href="#">ПОРТФОЛИО САЙТОВ</a>
    <a href="#">ОТЗЫВЫ</a>
    <a href="#">БЛОГ</a>
    <a href="#">КОНТАКТЫ</a>
  </div>

  <div class="contacts">
    <p>8-800-77-07-999 (с 05:00 до 00:00)</p>
  </div>
  <div class="burger burger2"><img src="burger.png" alt="burger" onclick="burger2()"></div>

</nav>
<div class="dropdown">
  <a href="#">ГЛАВНАЯ</a>
  <a href="#">УСЛУГИ</a>
  <a href="#">ПОРТФОЛИО САЙТОВ</a>
  <a href="#">ОТЗЫВЫ</a>
  <a href="#">БЛОГ</a>
  <a href="#">КОНТАКТЫ</a>
</div>

Answer 1

var button = document.querySelector("nav .dropdown");

Выбор элемента вида nav .dropdown ищет подчиненный класс в nav. В структуре HTML nav на одном уровне с .dropdown, по этому нужно просто var dropdown = document.querySelector(".dropdown");

var button = document.querySelector("nav .burger2");

Класса .burger2 нет в стуктуре HTML, есть .burger var button = document.querySelector("nav .burger");

<div class="burger"><img src="burger.png" alt="burger" onclick="burger2()"</div>

В данном коде две ошибки:

нет такой функции burger2(), есть menu()
если событие onclick оставить на теге img, то при первом нажатии он будет удален данной строкой кода button.innerHTML = "close";. Можно при открытии, когда dropdown.style.display === "grid" записать button.innerHTML = "<img src='burger.png' alt='burger' />";

https://codepen.io/agutin/pen/vYGJYQq

БЛОГ НА HUSL

CSS grid + javascript (ошибка)

Ответы (1 шт):