CODEWITHSUNDEEP
javascripthtml
Lucas
Lucas

Reputation: 648

Simple JavaScript statement isn't working for a side nav bar

I've created a simple JavaScript statement to open and close the nav side bar but it will only successfully open it and I'm confused as to why? if someone could explain it would be very helpful

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="../assets/css/signin.css" rel="stylesheet">
    <link href="../assets/css/index.css" rel="stylesheet">
    <title>Index</title>
</head>
<body>
        <!DOCTYPE html>
        <html>
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        </head>
        <body>

        <div id="mySidenav" class="sidenav">
          <a href="javascript:void(0)" class="closebtn" onclick="Nav()">&times;</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Clients</a>
          <a href="#">Contact</a>
        </div>
        <span style="font-size:30px;cursor:pointer" onclick="Nav()">&#9776; open</span>

        <script>
        function Nav() {
            if (document.getElementById("mySidenav").style.width = "0") {
                document.getElementById("mySidenav").style.width = "250px";
            }
            else {
                document.getElementById("mySidenav").style.width = "0";
            }
        }
        </script>

        </body>
        </html> 

    <!--JavaScript at end of body for optimized loading-->
    <!-- <script type="text/javascript" src="./js/jquery-3.3.1.slim.min.js"></script>
    <script type="text/javascript" src="./js/popper.min.js"></script>
    <script type="text/javascript" src="./js/bootstrap.min.js"></script> -->
</body>
</html>```

Upvotes: 2

Views: 73

Answers (2)

Marcus Matos
Marcus Matos

Reputation: 1

When you compare If "width" is equal "0" you need to put Double equals to compare like this:

if( width == "0")

To better code, you can put nav query inside a variable like this:

<script>
        function Nav() {

            var sideNav = document.getElementById("mySidenav");

            if (navSide.style.width == "0") {
                sideNav.style.width = "250px";
            }
            else {
                sideNav.style.width = "0";
            }
        }
        </script>

More compact:

<script>
        function Nav() {

            var sideNav = document.getElementById("mySidenav");

            sideNav.style.width = navSide.style.width == "0" ? "250px" : "0";
        }
        </script>

Upvotes: 0

UncleDave
UncleDave

Reputation: 7188

A single equals sign is an assignment not a comparison. The condition in your if is document.getElementById("mySidenav").style.width = "0", which returns the assigned value - "0", (non-empty) strings are truthy so the else block is never hit.

Use double or tripe equals for comparison.

function Nav() {
  if (document.getElementById("mySidenav").style.width === "0") {
    document.getElementById("mySidenav").style.width = "250px";
  }
  else {
    document.getElementById("mySidenav").style.width = "0";
  }
}

See here for the difference between == and ===.

It's also worth noting that, at least in Chrome, a width of 0 is actually returned as 0px so you may need to change your condition to document.getElementById("mySidenav").style.width === "0px".

var element = document.getElementsByTagName('div')[0];

element.style.width = "0";
console.log(element.style.width);
<div></div>

Upvotes: 6

Related Questions