CODEWITHSUNDEEP
javascripthtmlcssif-statement
Emmet Arries
Emmet Arries

Reputation: 549

Why doesn't my Javascript if else work?

I've been messing around with this mobile friendly navigation menu, and for some reason my menu will open (JS IF statement), but not close (JS ELSE statement. So I'm stuck as to why it is opening but not closing?

P.S. I'm new to JavaScript, so it might be something simple that I over looked, thanks!

Here's the code I'm working with:

function myFunction(x) {
    x.classList.toggle("change");
}


function navChange() {
    var x = document.getElementById("myNav").style.height
    if (x = "0%"){
     document.getElementById("myNav").style.height = "100%";
    } else {
     document.getElementById("myNav").style.height = "0%";
    }
}
.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .closebtn {
    font-size: 40px !important;
    top: 15px;
    right: 35px;
  }
}

.container {
    position: absolute;
    top: 25px;
    left: 25px;
    display: inline-block;
    cursor: pointer;
    margin: 20px;
    z-index: 12;
}

.bar1, .bar2 {
    width: 35px;
    height: 4px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    transform: rotate(-45deg) translate(0px, 0px) ;
    background-color: gray;
}

.change .bar2 {
    transform: translate(1px, -10px) rotate(45deg);
    background-color: gray;
}
<div id="myNav" class="overlay">
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>
</div>

<div class="container" onclick="myFunction(this), navChange()">
  <div class="bar1"></div>
  <div class="bar2"></div>
</div>

Thanks for your time and energy!

Upvotes: 1

Views: 195

Answers (2)

Greg Borbonus
Greg Borbonus

Reputation: 1384

Everything EasyBB said was true, but here's an example on how it can be done cleanly:

function myFunction(x) {
    x.classList.toggle("change");
}


function navChange() {
    var x = document.getElementById("myNav").clientHeight; // Use clientHeight to get the actual height, ignoring style rules. //.style.height
    if (x == "0"){ // == to compare, = here would set the value, so x would always equal 0.
     document.getElementById("myNav").style.height = "100%";
    } else {
     document.getElementById("myNav").style.height = "0"; //No reason to use percentage here, as 0% =0px.
    }
}
.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .closebtn {
    font-size: 40px !important;
    top: 15px;
    right: 35px;
  }
}

.container {
    position: absolute;
    top: 25px;
    left: 25px;
    display: inline-block;
    cursor: pointer;
    margin: 20px;
    z-index: 12;
}

.bar1, .bar2 {
    width: 35px;
    height: 4px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    transform: rotate(-45deg) translate(0px, 0px) ;
    background-color: gray;
}

.change .bar2 {
    transform: translate(1px, -10px) rotate(45deg);
    background-color: gray;
}
<div id="myNav" class="overlay">
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>
</div>

<div class="container" onclick="myFunction(this), navChange()">
  <div class="bar1"></div>
  <div class="bar2"></div>
</div>

Upvotes: 1

EasyBB
EasyBB

Reputation: 6544

The reasoning for the errors that I see is for one you are doing assignment in your conditions.

a = 15;
b = 10;
if(a = b) alert("hello world");

a now is now 10, because we used assignment instead of testing for equality which would look like.

if( a == b)

Also you are testing the style property which looks like you are setting through CSS and style.height will not return what you are looking for. You will need to test PX or what have you.

var height =  window.getComputedStyle(document.getElementById("element")).height;
var height = parseInt(height,10);
if( height > 1510 ) {
    //do whatever
}

Upvotes: 5

Related Questions