My JavaScript code is telling me I have already declared a variable and cannot read properties of null

Question

let toggleNavStatus = true;

let toggleNav = function() 
{
let getSidebar = document.querySelector(".nav-sidebar");
let getSidebarUl = document.querySelector(".nav-sidebar ul");
let getSidebarLinks = document.querySelectorAll(".nav-sidebar a");

if(toggleNavStatus === true)

{
    getSidebarUl.style.visibility = "hidden";
    getSidebar.style.width = "50px";
    getSidebarUl.style.opacity = 0;




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

        
    }

    toggleNavStatus = false;
}

else if (toggleNavStatus === false)

{
    getSidebarUl.style.visibility = "visible";
    getSidebar.style.width = "50px";

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

    toggleNavStatus = true;
}

}

The error Uncaught SyntaxError: Identifier 'toggleNavStatus' has already been declared VM634 app.js:278 Uncaught TypeError: Cannot read properties of null (reading'addEventListener')

That code will not have the `toggleNavStatus` problem you describe, since `toggleNavStatus` is only declared once. Are you repeatedly pasting this code into the browser console or similar? Because if so, when you paste it a second time, you're redeclaring `toggleNavStatus` (on most consoles; Chrome recently changed theirs to try to help with that). — T.J. Crowder, Aug 11 '22 at 08:00
[This question's answers](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) explain the `null` error. — T.J. Crowder, Aug 11 '22 at 08:00
I didn't paste it on console . what of the second error ? Uncaught TypeError: Cannot read properties of null (reading'addEventListener') — obodoma uzondu vincent, Aug 11 '22 at 08:08
Re `toggleNavStatus`, again, the code in the quesition will not have that "Identifier 'toggleNavStatus' has already been declared" error. Look outside that code to find where you've declared `toggleNavStatus` a second time. — T.J. Crowder, Aug 11 '22 at 08:10

score 1 · Answer 1 · answered Aug 11 '22 at 12:53

Propose you remove most of your JS code and replace it by using CSS styles and toggling class. It will grant better perfomance and easier to understand. ex. On button click (or any other trigger) you are toggling active class on menu:

function toggleNav() {
  const sidebar = document.querySelector(".nav-sidebar");
  sidebar.classList.toggle('visible');
}

And add this CSS:

.nav-sidebar {
  width: 50px;
}

.nav-sidebar ul {
  visibility: hidden;
  opacity: 0;
}

.nav-sidebar a {
  visibility: hidden;
  opacity: 0;
}

.nav-sidebar.visible ul {
  visibility: visible;
  opacity: 1;
}

.nav-sidebar.visible a {
  opacity: 0.5;
}

My JavaScript code is telling me I have already declared a variable and cannot read properties of null

1 Answers1