Sidebar not opening when clicking on hamburger button-CodePudding

I wrote code on JavaScript, it suppose to give class "active" to the sidebar when clicking on the hamburger menu, but it isn't. It says that "hamburger is not defined or it's not a function". I checked everything I could but could not find the answer.

Here is the HTML code:

const hamburger = document.getElementsByClassName(".hamburger");
const sidebar = document.getElementsByClassName(".sidebar");

hamburger.addEventListener('click', () => {
  sidebar.classList.add("active");
})

.main-page {
  width: 100%;
  height: 100vh;
  background-color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main-page__inner {
  width: 100%;
  max-width: 1350px;
  margin: 0 auto;
}

.main-page__title {
  font-family: 'Syncopate';
  font-style: normal;
  font-weight: 700;
  font-size: 100px;
  line-height: 104px;
  color: #FFFFFF;
}

.hamburger {
  position: absolute;
  width: 40px;
  top: 69px;
  left: 41px;
  z-index: 9999;
  padding: 15px 0;
  cursor: pointer;
}

.hamburger__item {
  width: 100%;
  display: block;
  height: 4px;
  background-color: #fff;
  position: absolute;
  inset: 0;
  margin: 0 auto;
}

.hamburger__item:before,
.hamburger__item:after {
  width: 100%;
  height: 4px;
  position: absolute;
  content: "";
  background-color: #fff;
  left: 0;
  z-index: 9999;
}

.hamburger__item:before {
  top: -7px;
}

.hamburger__item:after {
  bottom: -8px;
}

.sidebar {
  position: fixed;
  top: 0;
  left: -100%;
  bottom: 0;
  z-index: 600;
  background: #591753;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  visibility: hidden;
}

.sidebar.open {
  visibility: visible;
  left: 0;
}

.sidebar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto 0;
}

.sidebar__title {
  font-family: 'Montserrat';
  font-weight: 400;
  font-size: 20px;
  color: #fff;
}

<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=Inter:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:wght@400;600&family=Open Sans:wght@300;400;500;600;700;800&family=Raleway:wght@100;200;300;400;500;600;700;800;900&family=Source Sans Pro:wght@600&family=Syncopate:wght@400;700&display=swap"
  rel="stylesheet">
<header >
  <div >
    <div >
      <div >
        <img  src="/assets/Header/LOGO.png" alt="logo">
        <a  href="#">Оставить заявку</a>
      </div>
    </div>
  </div>
</header>

<div  id="hamburger">
  <span  id="hamburger__item"></span>
</div>

<div  id="sidebar">
  <div >
    <h1 >BLA BLA BLA</h1>
  </div>
</div>

<div >
  <div >
    <div >
      <h1 >CHAMPION ASTANA</h1>
    </div>
  </div>
</div>

CodePudding user response：

Firstly you are using getElementsByClassName with wrong string. It should be only the class name: document.getElementsByClassName('hamburger').

Secondly getElementsByClassName returns the array of elements, therefore it should be used like document.getElementsByClassName('hamburger')[0]

I would recommend using document.getElementById("hamburger") as you do have id available.

const hamburger = document.getElementsByClassName("hamburger")[0];
const sidebar = document.getElementsByClassName("sidebar")[0];

hamburger.addEventListener('click', () =>{
    sidebar.classList.add("active");
})

CodePudding user response：

Will be easier for you if you use

document.getElementById("hamburger"); and

document.getElementById("sidebar");

instead of getElementsByClassName

Also you need to change in the css this class

.sidebar.open {
  visibility: visible;
  left: 0;
}

into this one:

.sidebar.active {
  visibility: visible;
  left: 0;
}

Because you are adding the class "active" in sidebar.classList.add("active");, not the class "open".

Here is a working code of your example:

const hamburger = document.getElementById("hamburger");
const sidebar = document.getElementById("sidebar");

hamburger.addEventListener('click', () => {
sidebar.classList.add("active");
})

.main-page {
  width: 100%;
  height: 100vh;
  background-color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main-page__inner {
  width: 100%;
  max-width: 1350px;
  margin: 0 auto;
}

.main-page__title {
  font-family: 'Syncopate';
  font-style: normal;
  font-weight: 700;
  font-size: 100px;
  line-height: 104px;
  color: #FFFFFF;
}

.hamburger {
  position: absolute;
  width: 40px;
  top: 69px;
  left: 41px;
  z-index: 9999;
  padding: 15px 0;
  cursor: pointer;
}

.hamburger__item {
  width: 100%;
  display: block;
  height: 4px;
  background-color: #fff;
  position: absolute;
  inset: 0;
  margin: 0 auto;
}

.hamburger__item:before,
.hamburger__item:after {
  width: 100%;
  height: 4px;
  position: absolute;
  content: "";
  background-color: #fff;
  left: 0;
  z-index: 9999;
}

.hamburger__item:before {
  top: -7px;
}

.hamburger__item:after {
  bottom: -8px;
}

.sidebar {
  position: fixed;
  top: 0;
  left: -100%;
  bottom: 0;
  z-index: 600;
  background: #591753;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  visibility: hidden;
}

.sidebar.active {
  visibility: visible;
  left: 0;
}

.sidebar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto 0;
}

.sidebar__title {
  font-family: 'Montserrat';
  font-wei

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="ChampionA.css">
    <script src="ChampionA.js"></script>
    <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=Inter:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:wght@400;600&family=Open Sans:wght@300;400;500;600;700;800&family=Raleway:wght@100;200;300;400;500;600;700;800;900&family=Source Sans Pro:wght@600&family=Syncopate:wght@400;700&display=swap" rel="stylesheet">
    <title>CHAMPION Astana</title>
</head>
<body>
    <header >
        <div >
            <div >
                <div >
                    <img  src="/assets/Header/LOGO.png" alt="logo">
                    <a  href="#">Оставить заявку</a>
                </div>
            </div>
        </div>
    </header>

    <div  id="hamburger">
        <span  id="hamburger__item"></span>
    </div>

    <div  id="sidebar">
        <div >
            <h1 >BLA BLA BLA</h1>
        </div>
    </div>

    <div >
        <div >
            <div >
                <h1 >CHAMPION ASTANA</h1>
            </div>
        </div>
    </div>
</body>
</html>