2

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>```
Lucas
  • 598
  • 9
  • 18
  • Your HTML is invalid – you can’t nest entire documents like that. Try running your code through the [W3 validator](https://validator.w3.org/#validate_by_input) – MTCoster Nov 15 '19 at 20:15

2 Answers2

6

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>
UncleDave
  • 6,872
  • 1
  • 26
  • 44
0

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>
Marcus Matos
  • 1