jQuery to Javascript converted but not working in html

Question

I use HTML5, CSS, and vanilla JavaScript. I want converted this jQuery code, and change it. But I don't know what problem in after Code.

Originally there is a small triangular icon at the top, and it should also fill the entire screen with the menu bar. However, this code doesn't fire the event after clicking what the icon at the top would be able to create.

Before Code is this,

$(document).ready(function(){
  $('.menubars').on('click', function(){
    if($('.menu').hasClass('active')) {
      closeMenu();
    } else {
      openMenu();
    }
   });
  
  function openMenu() {
    $('.menu').toggleClass('active');
    $('.menubackground').css('left', '0');
    $('.menubackground').css('top', '-810px');
    $('.top').css('top', '10px');
        $('.bottom').css('top', '10px');
        $('.menu ul').css('visibility','visible');
        $('.top').css('transform', 'rotate(45deg)');
        $('.bottom').css('transform', 'rotate(-45deg)');
        $('.middle').css('transform', 'rotate(45deg)');
  }
  
  function closeMenu() {
            $('.menu').toggleClass('active');
            $('.menu ul').css('visibility','hidden');
            $('.top').css('top', '0px');
            $('.bottom').css('top', '20px');
            $('.top').css('transform', 'rotate(0deg)');
            $('.middle').css('transform', 'rotate(0deg)');
            $('.bottom').css('transform', 'rotate(0deg)');
            $('.menubackground').css('left', '-2240px');
            $('.menubackground').css('top', '-2240px');
    }
});

and my code is like this

var menu = document.getElementsByClassName('menu');

document.onload = function () {
    document
        .getElementsByClassName('menubars')
        .addEventListener('click', function () {
            if (document.getElementsByClassName('menu').classList.contains('active')) {
                closeMenu();
            } else {
                openMenu();
            }
        });

    function openMenu() {
        var clicked = 0;
        menu.onClick() = function () {
            if (clicked) {
                menu.classList.add('active');
            } else {
                menu.classList.remove('active');
            }
        }
        document
            .getElementsByClassName('menubackground')
            .style
            .left = '0px';
        document
            .getElementsByClassName('menubackground')
            .style
            .top = '-810px';
        document
            .getElementsByClassName('top')
            .style
            .top = '10px';
        document
            .getElementsByClassName('bottom')
            .style
            .top = '10px';
        document
            .querySelectorAll('.menu ul')
            .visibility = 'visible';
        document
            .getElementsByClassName('top')
            .style
            .transform = 'rotate(45deg)';
        document
            .getElementsByClassName('bottom')
            .style
            .transform = 'rotate(-45deg)';
        document
            .getElementsByClassName('middle')
            .style
            .transform = 'rotate(45deg)';
    }

    function closeMenu() {
        menu.onClick() = function () {
            if (clicked) {
                menu.classList.add('active');
            } else {
                menu.classList.remove('active');
            }
        }

        document
            .querySelectorAll('.menu ul')
            .visibility = 'hidden';
        document
            .getElementsByClassName('top')
            .style
            .top = '0px';
        document
            .getElementsByClassName('bottom')
            .style
            .top = '20px';
        document
            .getElementsByClassName('top')
            .style
            .transform = 'rotate(0deg)';
        document
            .getElementsByClassName('bottom')
            .style
            .transform = 'rotate(0deg)';
        document
            .getElementsByClassName('middle')
            .style
            .transform = 'rotate(deg)';
        document
            .querySelectorAll('.menubackground')
            .style
            .left = '-2240px';
        document
            .querySelectorAll('.menubackground')
            .style
            .top = '-2240px';
    }
}

Html

   <div class="menu">
        <div class="menubars">
          <div class="menubar top"></div>
          <div class="menubar middle"></div>
          <div class="menubar bottom"></div>
        </div>
        <div class="menubackground"> 
        </div>
        <ul class="menulinks">
              <li><a href="#">Home</a></li>
              <li><a href="#">About us</a></li>
              <li><a href="#">Portfolio</a></li>
              <li><a href="#">Contact us</a></li>  
        </ul> 
        </div>

css

*{
  margin: 0;
  padding: 0;
}

p{
  position: absolute;
  color: #222;
  text-decoration: none;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
p a{
  text-decoration: none;
  color: purple;
}
.menu{
  background-color: red;
  width: 100%;
  height: 100%;
}
.menubackground
{width: 2700px;
height: 2700px;
position: fixed;
left: -2240px;
z-index: 10;
top: -2240px;
transform: rotate(-45deg);
background-color: #28eca4;
transition : all 700ms ease-in;
}

.menulinks{
  position: absolute;
  z-index: 20;
  text-align: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  list-style-type: none;
}
.menulinks li a{
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 3rem;
}
.menubars{
  position: absolute;
  left: 20px;
  top: 20px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  z-index: 20;
}
.menubars .menubar{
  height: 5px;
  transition : all 200ms ease-out;
  position: absolute;
  z-index: 30;
  width: 30px;
  background-color: #fff;
}

.top{
  top: 0;
}
.middle{
  top: 10px;
}
.bottom{
  top: 20px;}

but it doesn't work. I wanna know what I fix it.

ThankYou.

"doesn't work' isn't a useful description of the problem, please see [ask] and create a [mcve] (emphasis on the minimal) using the live demo feature of the question editor and provide a clear problem statement. — Quentin, Apr 30 '21 at 15:46
Probably a duplicate of https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return — Quentin, Apr 30 '21 at 15:46
First, `.getElementsByClassName()` returns a node list and you can't attach an event handler to a node list, you'd have to loop through the elements within the list and add the event handler to each and node lists won't have a `.classList` property either. Second, [`.getElementsByClassName()` should be avoided](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) and `.querySelectorAll()` should be used instead. — Scott Marcus, Apr 30 '21 at 15:49
So, in short, you are treating the collection returned from `.getElementsByClassName()` as if it was an element, when it's not. You have to loop through the collection and interact with the individual elements that are in it. — Scott Marcus, Apr 30 '21 at 15:52

score 0 · Accepted Answer · answered Apr 30 '21 at 15:53

First, .getElementsByClassName() returns a node list and you can't attach an event handler to a node list, you'd have to loop through the elements within the list and add the event handler to each and node lists won't have a .classList property either. Second, .getElementsByClassName() should be avoided and .querySelectorAll() should be used instead.

So, in short, you are treating the collection returned from .getElementsByClassName() as if it was an element, when it's not. You have to loop through the collection and interact with the individual elements that are in it.

jQuery to Javascript converted but not working in html

1 Answers1