我的关闭导航功能在点击时不起作用

Question

I'm trying to make left= 0vw on click of menu icon but it doesn't work . CSS and html work pretty well I'm a newbie don't make fun if it's so obvious :'(

var menuEl = document.getElementsByClassName("bx-menu");
var navEl = document.getElementsByClassName("nav");
function closenav(){
    if(navEl.style.left === "-100vw"){
        navEl.style.left = "0vw";
    } else {
        navEl.style.left = "-100vw";
    }
}

menuEl.addEventListener("click",closenav());

Answer 1

You are using getElementsByClassName() method - it gets element by its class attribute and index.

Specify what element's index you want to target.

var menuEl = document.getElementsByClassName("bx-menu")[0];
var navEl = document.getElementsByClassName("nav")][0];

Answer 2

think he cant read the value of -100vw in line 4

so you have to read out the css value with this:

const element = document.querySelector('.element')
const style = getComputedStyle(element)

Answer 3

document.getElementsByClassName returns an array of all the elements that have the given class name.

To get the first element which is probably the one that you want you need to choose the first element of this array.

Note also the passing of a function in the below.

Here is your altered code

var menuEl = document.getElementsByClassName("bx-menu")[0];
var navEl = document.getElementsByClassName("nav")[0];
function closenav(){
    if(navEl.style.left === "-100vw"){
        navEl.style.left = "0vw";
    } else {
        navEl.style.left = "-100vw";
    }
}

menuEl.addEventListener("click",closenav);// Note you need to pass the function here not call the function so I’ve removed the ()

var menuEl = document.getElementsByClassName("bx-menu");
var navEl = document.getElementsByClassName("nav");
function closenav(){
    if(navEl.style.left === "-100vw"){
        navEl.style.left = "0vw";
    } else {
        navEl.style.left = "-100vw";
    }
}

// do you need this twice?? If so again remove the () menuEl.addEventListener("click",closenav());

If the nav bar is unique you may like to look at giving it a unique id and then you can select it using document.getElementById

Answer 4

Look specifically at document.getElementsByClassName("bx-menu")[0] , I've added [0] as the getElementsByClassName returns an array of occurences of the class.

Also be sure to remove the brackets of closenav when adding it as an eventlistener like so: menuEl.addEventListener("click", closenav); or encapsulate the whole function inside the eventlistener like I did in the snippet below.

 var menuEl = document.getElementsByClassName("bx-menu")[0]; menuEl.addEventListener("click", function (event) { var navEl = document.getElementsByClassName("nav")[0]; if(navEl.style.left === "-100vw"){ navEl.style.left = "0vw"; } else { navEl.style.left = "-100vw"; } });

 .nav { background-color: blue; height: 100px; width: 100px; position: absolute; }

 <div class="bx-menu"> Click here! </div> <div class="nav" style="left: -100vw;"> </div>

Answer 5

An advice is to use #id instead of .class to get the unique elements by using getElementById . Otherwise you will end up with an array of elements, if you're using getElementsByClass .

I would also suggest to:
a) use transform: translate instead of animating with left because left causes recalculation all elements, while transform only takes the moving element into consideration, and

b) toggle a class with navEl.classList.toggle() instead of looking up style properties in your method.

Don't mind the CSS. It's mostly to set things up.

 let navEl = document.getElementById("nav"); let hamburgerEl = document.getElementById("hamburger"); hamburgerEl.addEventListener("click", toggleMenu); function toggleMenu() { navEl.classList.toggle("open"); }

 #nav { position: fixed; left: 0px; top: 0px; width: 200px; height: 400px; padding: 1rem; /* 'rem' is the size of the font in the body element */ text-align: center; background-color: lightblue; border-right: 1px solid darkgrey; transform: translateX(-100%); transition: transform 400ms; } #nav.open { /* the event listener toggles this class */ transform: translateX(0px); } #hamburger { position: relative; /* in order to use z-index to place #hamburger over the menu */ z-index: 100; width: 20px; height: 20px; display: flex; /* to center the strokes */ align-items: center; cursor: pointer; } #strokes, #strokes::before, #strokes::after { width: 100%; height: 2px; background-color: black; } #strokes::before, /* pseudo-elements */ #strokes::after { content: ''; display: block; } #strokes::before { transform: translateY(-6px); } #strokes::after { transform: translateY(4px); }

 <body> <div id="nav"> MENU </div> <div id="hamburger"> <div id="strokes"></div> </div> </body>