Почему у меня не появляется дополнительный класс?

Question

Почему при нажатии на класс .burgin-menu классу .list не добавляется класс .show-list ?

document.querySelector('.burgin-menu').onclick = function() {
  document.querySelector('.list').classList.add('show-list');
}

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

a {
    text-decoration: none;
}

ul,
ol,
li {
    list-style: none;
}
body {
    font-family: arial;
}
a {
    color: white;
}

.header {
    background-color: #00a2d3;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
}
.container {
    margin: 0 auto;
    max-width: 1170px;
    padding: 0px 20px;
}
.header-wrapper {
    display: flex;
    align-items: center;
}
.burgin-menu {
    display: none;
}

.nav .list {
    margin-left: 700px;
}
.nav .list li {
    display: inline-block;
    margin-right: 20px;
    /*justify-content: space-between;*/
}


@media screen and (max-width: 1140px) {
    .nav .list {
        margin-left: 600px;
    }
}
@media screen and (max-width: 1040px) {
    .nav .list {
        margin-left: 520px;
    }
}
@media screen and (max-width: 1000px) {
    .nav .list a {
        display: none
    }
    .burgin-menu {
        display: block;
        position: absolute;
        left: 90%;
    }
    .nav .list {
        margin-left: 0px;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Бургер меню</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="header-wrapper">
                <div class="logo">
                    <a href="#">
                        <h1>Logo</h1>
                    </a>
                </div>

                <div class="burgin-menu">
                    <a href="#">
                        <img src="burgin-menu.svg" alt="">
                    </a>
                </div>
                
                <nav class="nav">
                    <ul class="list">
                        <li><a href="#">Главная</a></li>
                        <li><a href="#">О нас</a></li>
                        <li><a href="#">Услуги</a></li>
                        <li><a href="#">Контакты</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    
    <script src="script.js"></script>
    <!-- <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script> -->
</body>
</html>

Answer 1

document.querySelector('.burgin-menu').addEventListener('click', () => {
  document.querySelector('.list').classList.add('show-list');
})

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

a {
  text-decoration: none;
}

ul,
ol,
li {
  list-style: none;
}

body {
  font-family: arial;
}

a {
  color: white;
}

.header {
  background-color: #00a2d3;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
}

.container {
  margin: 0 auto;
  max-width: 1170px;
  padding: 0px 20px;
}

.header-wrapper {
  display: flex;
  align-items: center;
}

.burgin-menu {
  display: none;
}

.nav .list {
  margin-left: 700px;
}

.nav .list li {
  display: inline-block;
  margin-right: 20px;
  /*justify-content: space-between;*/
}

.show-list a {
  display: inline !important;
}

@media screen and (max-width: 1140px) {
  .nav .list {
    margin-left: 600px;
  }
}

@media screen and (max-width: 1040px) {
  .nav .list {
    margin-left: 520px;
  }
}

@media screen and (max-width: 1000px) {
  .nav .list a {
    display: none
  }
  .burgin-menu {
    display: block;
    position: absolute;
    left: 90%;
  }
  .nav .list {
    margin-left: 0px;
  }
}

<header class="header">
  <div class="container">
    <div class="header-wrapper">
      <div class="logo">
        <a href="#">
          <h1>Logo</h1>
        </a>
      </div>

      <div class="burgin-menu">
        <a href="#">
          <img src="burgin-menu.svg" alt="Test">
        </a>
      </div>

      <nav class="nav">
        <ul class="list">
          <li><a href="#">Главная</a></li>
          <li><a href="#">О нас</a></li>
          <li><a href="#">Услуги</a></li>
          <li><a href="#">Контакты</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

БЛОГ НА HUSL

Почему у меня не появляется дополнительный класс?

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