JavaScript Function onClick only works once-CodePudding

I have been working on learning JavaScript, and I have a piece of JavaScript which is supposed to open a hamburger menu on the top left of the page.

The thing is, the code works once, but for some reason the if{} statement is not working the second time:

let toggleNavStatus = false;

let toggleNav = function() {


    let getSidebar = document.querySelector(".nav-sidebar");
    let getSidebarUl = document.querySelector(".nav-sidebar ul");
    let getSidebarTitle = document.querySelector(".nav-sidebar span");
    let getSidebarLinks = document.querySelectorAll(".nav-sidebar a");

    if (toggleNavStatus === false){
        getSidebarUl.style.visibility = "visible";
        getSidebar.style.width = "272px";
        getSidebarTitle.style.opacity = "0.5";

        let arrayLength = getSidebarLinks.length();
        for(let i = 0; i < arrayLength; i  ){
            getSidebarLinks[i].style.opacity = "1";
          }

        toggleNavStatus = true;

    }

    else if (toggleNavStatus === true){
        getSidebar.style.width = "50px";
        getSidebarTitle.style.opacity = "0";

        let arrayLength = getSidebarLinks.length();
        for(let i = 0; i < arrayLength; i  ){
            getSidebarLinks[i].style.opacity = "0";
        }

        getSidebarUl.style.visibility = "hidden";

        toggleNavStatus = false;

    }

}

JavaScript Code

 <!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="XeroXipher" />
    <link rel="stylesheet" type="text/css" href="styles.css"/>

    <title>End World</title>
</head>
    
    <body>
        
        <nav >
            <div  onclick="toggleNav()"></div>
            <ul>
                <li><a href="Home.html">Home</a></a></li>
                <li><a href="Cities">Cities</a></li>
                <li><a href="Forums">Forums</a></li>
                <li><a href="AccountSettings">Account Settings</a></li>
                
            </ul>
        </nav>
        <aside>
             <nav >
                <ul>
                    <li><span>Navigation</span></li>
                    <li><a href="Cities">Cities</a></li>
                    <li><a href="Forums">Forums</a></li>
                    <li><a href="AccountSettings">Account Settings</a></li>
                    <li><a href="Logout">Logout</a></li>
                    
                </ul>
            </nav>
            
        </aside>
        
    
    </body>
    <script src="main.js"></script>
  
</html>

HTML Code

I have a good understanding on how if, else works and I cannot figure out what isn't working. It seems to run the if(false) correctly but not run else if(true);"

CodePudding user response：

There is a bug if you take a look at the console when trying to get the length.

let arrayLength = getSidebarLinks.length();

just remove the parentheses after the 'length'

let arrayLength = getSidebarLinks.length;

CodePudding user response：

let arrayLength = getSidebarLinks.length();

length is not a method. So, no need of function call.

On removing the parantheses, the click me toggles elements visible and invisible.

CodePudding user response：

I hope this might helpful for your question. Instead of using if/else we can use javascript toggle. The thing your code not working was, one is tpe validation and elment will loss visiblity after first click.

let toggleNav = function() {
    let getUl = document.querySelector(".toggle-ul");
    getUl.classList.toggle("visible");
}

.btn-toggle-main{
  cursor:pointer;
}
.toggle-ul{
  display:none;
}
.toggle-ul.visible{
  display:block;
}

<nav >
    <div  onclick="toggleNav()">Click Me</div>
       <ul >
            <li><a href="Home.html">Home</a></a></li>
            <li><a href="Cities">Cities</a></li>
            <li><a href="Forums">Forums</a></li>
            <li><a href="AccountSettings">Account Settings</a></li>    
       </ul>
</nav>

CodePudding user response：

Try to replace

toggleNavStatus = true;

return true;

and

toggleNavStatus = false;

return false;

I'm not absolutely sure about it, but I guess as your function lacks a defined return value, it returns a standard value in the end that is assigned to toggleNavStatus, overwriting the value you set before.