Why doesn't my Javascript if else work?

Question

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!

Why the downvote for the OP? It is a common fault to happen when new to javascript, and I believe not all answers here on SO serve as an answer or could not define why exactly. — EasyBB
– EasyBB, Commented Mar 23, 2016 at 1:54

EasyBB · Accepted Answer · 2016-03-23 01:46:01Z

5

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
}

answered Mar 23, 2016 at 1:46

EasyBB

6,62210 gold badges51 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Emmet Arries Over a year ago

How can I use PX when my height is 100%?

EasyBB Over a year ago

You'll have to store the initial PX value with JavaScript. Per se when the page loads. var originalHeight = window.getComputedStyle(document.getElementById("element")).height; Then we can test height == originalHeight etc.

Emmet Arries Over a year ago

If you look at my code, the height that is changing is CSS height.

EasyBB Over a year ago

Yes you are using a CSS class to change the height, meaning style will not work. Only and only if the style property exists on the element will the browser compile that request correctly. i.e. <div style="height:100%"></div>

Emmet Arries Over a year ago

Ok, I see. Thanks for all your help! I accepted the other answer because it had a finished JavaScript, and because I'm new that is really helpful. Thank you again for all your effort!

Greg Borbonus · Accepted Answer · 2016-03-23 02:15:21Z

1

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>

answered Mar 23, 2016 at 2:15

Greg Borbonus

1,3848 silver badges16 bronze badges

2 Comments

Emmet Arries Over a year ago

That works! Thanks so much for giving finished code, I'm new to JavaScript and that really helped!!!

Greg Borbonus Over a year ago

No problem, pay close attention to the notes I've added ( after the // on the line) and you'll see what I did.

Collectives™ on Stack Overflow

Why doesn't my Javascript if else work?

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related