if，否则if-javascript函数只能运行一次

Question

My javascript works only one time. There are already questions like this, but sill I'm not able to fix this simple thing.

I want to change visibility: hidden; -> visibility: visible; visibility: hidden; -> visibility: visible; and vice versa.

 let toggleNavStatus = false; function toggleNav() { let getSidebar = document.querySelector(".nav-sidebar"); if (toggleNavStatus === false) { getSidebar.style.visibility = "visible"; let toggleNavStatus = true; } else if (toggleNavStatus === true) { getSidebar.style.visibility = "hidden"; let toggleNavStatus = false; } } 

 .nav-sidebar { width: 250px; height: 70vh; background-color: #1b1b1b; visibility: hidden; transition: all 0.3s ease-in-out; } 

 <a href=# onclick="toggleNav()">button</a> <aside class="nav-sidebar"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> 

See fiddle (actually it is not working in fiddle?)

Answer 1

Your issue is that you are redeclaring your toggleNavStatus within your if statement. When you use let in your if-statement, you are referring to a new variable toggleNavStatus within your if statement (ie a local variable), not the one you declared at the beginning of your function, thus it doesn't change.

See working example below:

 let toggleNavStatus = false; function toggleNav() { let getSidebar = document.querySelector(".nav-sidebar"); if (toggleNavStatus === false) { getSidebar.style.visibility = "visible"; toggleNavStatus = true; } else if (toggleNavStatus === true) { getSidebar.style.visibility = "hidden"; toggleNavStatus = false; } } 

 .nav-sidebar { width: 250px; height: 70vh; background-color: #1b1b1b; visibility: hidden; transition: all 0.3s ease-in-out; } 

 <a href=# onclick="toggleNav()">button</a> <aside class="nav-sidebar"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> </aside> 

Answer 2

 let toggleNavStatus = true; 

You're creating a new local variable with the same name and setting that.

You never change the value of your global variable, so when you test if (toggleNavStatus === false) a second time, it is still false .

Answer 3

You not changing the toggleNavStatus declared in global scope instead you a creating a new variable inside your if blocks. Don't use let again inside your if blocks

 let toggleNavStatus = false; function toggleNav() { let getSidebar = document.querySelector(".nav-sidebar"); if (toggleNavStatus === false) { getSidebar.style.visibility = "visible"; toggleNavStatus = true; } else if (toggleNavStatus === true){ getSidebar.style.visibility = "hidden"; toggleNavStatus = false; } } 

 .nav-sidebar{ width: 250px; height: 70vh; background-color: #1b1b1b; visibility: hidden; transition: all 0.3s ease-in-out; } 

 <a href=# onclick="toggleNav()">button</a> <aside class="nav-sidebar"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> 

Answer 4

corrected code:

 let toggleNavStatus = false; function toggleNav() { let getSidebar = document.querySelector(".nav-sidebar"); if (toggleNavStatus === false) { getSidebar.style.visibility = "visible"; toggleNavStatus = true; } else if (toggleNavStatus === true){ getSidebar.style.visibility = "hidden"; toggleNavStatus = false; } } 

 .nav-sidebar{ width: 250px; height: 70vh; background-color: #1b1b1b; visibility: hidden; transition: all 0.3s ease-in-out; } 

 <a href=# onclick="toggleNav()">button</a> <aside class="nav-sidebar"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> 

Answer 5

I think you should create class visible and than with javascript you should check if the class exist , so basically toggle class

howto_js_toggle_class.asp

Answer 6

remove the let in if condition.Beacuse you are each time declare as new varible

 let toggleNavStatus = false; function toggleNav() { let getSidebar = document.querySelector(".nav-sidebar"); if (toggleNavStatus === false) { getSidebar.style.visibility = "visible"; toggleNavStatus = true; } else if (toggleNavStatus === true){ getSidebar.style.visibility = "hidden"; toggleNavStatus = false; } } 

 .nav-sidebar{ width: 250px; height: 70vh; background-color: #1b1b1b; visibility: hidden; transition: all 0.3s ease-in-out; } 

 <a href=# onclick="toggleNav()">button</a> <aside class="nav-sidebar"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> 

Answer 7

You're redeclaring toggleNavStatus in your condition statement which doesn't update the global toggleNavStatus .

Simply remove let in your if/else conditions.

 let toggleNavStatus = false; function toggleNav() { let getSidebar = document.querySelector(".nav-sidebar"); if (toggleNavStatus === false) { getSidebar.style.visibility = "visible"; toggleNavStatus = true; } else if (toggleNavStatus === true){ getSidebar.style.visibility = "hidden"; toggleNavStatus = false; } } 

 .nav-sidebar{ width: 250px; height: 70vh; background-color: #1b1b1b; visibility: hidden; transition: all 0.3s ease-in-out; } 

 <a href=# onclick="toggleNav()">button</a> <aside class="nav-sidebar"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul>